Mushilu-San UI Alert
An inline message that tells the user about a success, warning, error or information on the page.
Selector: mui-alert
import { Alert } from '@mushilu-san/ui/feedback';Loading example…
Overview
variant sets the meaning: info, success, warning or danger.
warning and danger alerts are role="alert" (assertive), so they interrupt. info and success are role="status" (polite). Set dismissible to show a close button that emits dismissed.
When to use
Confirming a result on the page, such as "Changes saved". Warning about a problem that affects the content nearby.
When not to use
A brief message that disappears on its own. Use a toast. Use Toast instead.A decision the user must make before continuing. Use an alert dialog. Use Alert dialog instead.
Guidelines
Do
Say what happened and what to do next in the message. Use the variant that matches the severity.
Don't
Do not stack several alerts on one page. Do not use dangerfor a minor issue.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | status or alert | role="alert" for warning and danger, otherwise role="status". aria-live follows the role. |
dismiss button | button |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | dismissible is set. |
Do not move focus to an alert when it appears. Screen readers announce it from the live region.
API
Alert
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'danger' | 'success' | 'warning' | 'info' | Visual + semantic severity. |
heading | string | undefined | — | Optional bold heading rendered above the projected body. |
dismissible | boolean | false | Show a dismiss button and enable Escape-to-dismiss. Accepts attribute presence, e.g. <… dismissible>. |
| Name | Type | Description |
|---|---|---|
dismissed | void | Emitted when the user dismisses the alert (button or Escape). |
CSS parts
::part(body)::part(dismiss)::part(root)::part(title)
Tokens
--mui-color-success-subtle--mui-color-warning-subtle--mui-color-danger-subtle--mui-color-primary-subtle--mui-radius-md--mui-color-focus-ring