MenuCaderno UI
npmGitHub
Theme

<cad-alert>

Alert

Show a status message, with an optional action and close button.

Status with an action

We’ve updated our terms of service. Please review the changes.

Status variants

Choose the variant that matches the message.

Success

Your changes are ready.

Warning

Two fields still need attention.

Error

Check the connection and try again.

Neutral

This item is now read-only.

Accent

Add a photo so collaborators recognize you.

Variants

Choose a variant that matches the message. Use accent for a next step and size="compact" for alerts within content.

API reference: <cad-alert>

dismissibledismissiblebooleanfalsedismiss-labeldismissLabelstring'Dismiss alert'headingheadingstring''sizesizeCadAlertSize'default'variantvariantCadAlertVariant'info'dismissiblebooleandismissibleyesdismissLabelstringdismiss-labelnoheadingstringheadingnosizeCadAlertSizesizeyesvariantCadAlertVariantvariantyescad-dismissCustomEventFired after the dismiss button hides the alert.(default)Alert body content.actionOptional next-step action.titleVisible alert heading. Falls back to the `heading` attribute.actionAlert action container.baseAlert container.close-buttonDismiss button.contentAlert body.iconStatus icon.titleAlert heading.--cad-alert-bgPer-instance alert background.--cad-alert-inkPer-instance alert accent.

Events

cad-dismiss reports { variant } and bubbles to parent elements.

Accessibility

Info, success, neutral, and accent use role="status". Warning, error, and danger use role="alert". Name dismiss buttons and explain urgency in text, not just color.

MIT licensed. Built with Caderno UI.Report an issue
Back to top