Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · content-state

Content states

A responsive composition for empty, loading, success, warning and error regions with application-owned lifecycle and announcements.

Install with npx @madojs/ui@latest add content-state.

Block

Content states

No projects yet

Create a project to start tracking deployments and releases.

Loading projects

Fetching the latest project data.

Projects are ready

The latest project data is available.

Sign in to view projects

This project area is private. Continue with your account.

Projects could not be loaded

Check your connection and try again.

View error details

Composition

  • Compose an application-owned section from optional decorative media, a heading/description content group and native actions.

Public API

class mado-ui-content-state / media / content / title / description / actions
Empty, loading, success, warning and error state composition hooks.
attribute data-tone
Neutral, info, success, warning or danger presentation.

Detected public classes

  • .mado-ui-content-state
  • .mado-ui-content-state-actions
  • .mado-ui-content-state-content
  • .mado-ui-content-state-description
  • .mado-ui-content-state-media
  • .mado-ui-content-state-title

Detected public CSS properties

  • --mado-ui-color-border
  • --mado-ui-color-danger-soft
  • --mado-ui-color-danger-text
  • --mado-ui-color-info-soft
  • --mado-ui-color-info-text
  • --mado-ui-color-neutral-soft
  • --mado-ui-color-neutral-text
  • --mado-ui-color-success-soft
  • --mado-ui-color-success-text
  • --mado-ui-color-surface
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-color-warning-soft
  • --mado-ui-color-warning-text
  • --mado-ui-content-state-actions-gap
  • --mado-ui-content-state-align
  • --mado-ui-content-state-background
  • --mado-ui-content-state-border
  • --mado-ui-content-state-color
  • --mado-ui-content-state-content-max-inline-size
  • --mado-ui-content-state-description-color
  • --mado-ui-content-state-gap
  • --mado-ui-content-state-media-background
  • --mado-ui-content-state-media-border
  • --mado-ui-content-state-media-color
  • --mado-ui-content-state-media-radius
  • --mado-ui-content-state-media-size
  • --mado-ui-content-state-min-block-size
  • --mado-ui-content-state-padding
  • --mado-ui-content-state-radius
  • --mado-ui-content-state-title-size
  • --mado-ui-radius-full
  • --mado-ui-radius-md
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-5
  • --mado-ui-space-7

Accessibility contract

  • The owning screen decides whether the state is an ordinary section, status, alert or aria-busy replacement.
  • Decorative media is aria-hidden; the visible heading and description carry the meaning.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Do not move focus merely because content becomes empty or starts loading; repair focus only when its previous target is removed.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.