Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · alert

Alert

A semantic message layout with neutral and contextual tones.

Install with npx @madojs/ui@latest add alert.

Block

Alert

No local changes

Every copied component already matches the selected registry source.

Update available

A newer registry source is available for two installed components.

Deployment completed

The production build completed successfully and is now available.

Storage almost full

Only 12% of the build cache remains; clean old artifacts soon.

Build failed

The build stopped because the catalog typecheck reported an error.

View error details

Composition

  • Choose a section or div that fits the document, then compose content, a heading, description and optional actions inside mado-ui-alert.

Public API

class mado-ui-alert
Root alert presentation; it does not add live-region semantics.
class mado-ui-alert-content / title / description / actions
Optional structural hooks for authored message content.
attribute data-tone
Neutral, info, success, warning or danger presentation.

Detected public classes

  • .mado-ui-alert
  • .mado-ui-alert-actions
  • .mado-ui-alert-content
  • .mado-ui-alert-description
  • .mado-ui-alert-title

Detected public CSS properties

  • --mado-ui-alert-accent
  • --mado-ui-alert-actions-gap
  • --mado-ui-alert-background
  • --mado-ui-alert-border
  • --mado-ui-alert-color
  • --mado-ui-alert-gap
  • --mado-ui-alert-padding
  • --mado-ui-alert-radius
  • --mado-ui-color-action
  • --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-focus-ring
  • --mado-ui-radius-sm
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-4

Accessibility contract

  • The application owns the semantic container and accessible heading relationship.
  • Use role="alert" only for an important message inserted dynamically; a persistent notice should not be announced on every render.

Keyboard

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

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

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.