Ooko
Playground

OAlert ​

OAlert displays important feedback or information. It uses role="alert" and can expose an optional native close button.

Usage ​

Step by step ​

  1. Import OAlert from the ooko-ui/alert public subpath.
  2. Choose a semantic color and provide a concise title when it helps readers scan the message.
  3. Add closable only when the parent also listens for close and removes the alert.

Example ​

The rendered example and its source come from the same Vue single-file component.

Interactive playground ​

Change the alert's color, title, alignment, and close action. The preview updates immediately.

Props ​

PropTypeDefaultDescription
color"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral""info"Visual color applied to the alert.
titlestringundefinedOptional title displayed before the alert content.
centerbooleanfalseCenters the title and content.
closablebooleanfalseDisplays a button that emits the close event.
closeLabelstring"Dismiss alert"Accessible name of the close button.
glassbooleanfalseUses a translucent, blurred surface with default text; the tone stays on the border and a dot and faintly tints the background. Defaults to the app's glass option.

Events ​

EventPayloadDescription
closenoneRequests that the alert be closed.

Slots ​

SlotPropsDescription
defaultnoneProvides the alert message.
TypeDefinition
OokoColortype OokoColor = (typeof OOKO_COLORS)[number];

CSS custom properties ​

Custom propertyDefaultDescription
--o-alert-paddingvar(--o-space-4)Sets the inner spacing around the alert content.
--o-alert-gapvar(--o-space-2)Sets the spacing between the title and main content.
--o-alert-border0Sets the alert border shorthand; its color follows the color prop.
--o-alert-border-radiusvar(--o-radius-surface)Sets the alert corner radius.
--o-alert-close-size1.75remSets the close button size; the close icon scales with this value.
--o-alert-glass-backgroundvar(--o-background-glass)Sets the translucent background of a glass alert.
--o-alert-glass-tint12%Sets how strongly the color tone tints the background of a glass alert.
--o-alert-glass-backdrop-filtervar(--o-backdrop-filter-glass)Sets the filter applied to the content behind a glass alert.

Override example ​

css
:root {
  --o-alert-border-radius: var(--o-radius-xl);
  --o-alert-close-size: 2rem;
  --o-alert-border: 1px dashed;
}

Define the same custom properties on a container instead of :root to limit an override to one part of an application.

Accessibility ​

  • The root uses role="alert" so important dynamic content is announced.
  • The close control is a native button with standard keyboard and focus behavior.
  • Its decorative Lucide X icon is hidden from assistive technologies.
  • Set closeLabel to a localized, context-specific accessible name.
  • Additional attributes such as aria-live, aria-atomic, and id are forwarded to the alert root.
  • Forced-colors mode receives explicit borders for the alert and close button.

Behavior and edge cases ​

  • App defaults may configure color and closeLabel; direct props take precedence.

  • Semantic alert text uses the deep shade in the light theme and deeper in explicit or system-selected dark themes.

  • glass is the soft variant for translucent interfaces: a translucent, blurred surface with default text, readable in both themes, while the color tone moves to the border and a dot before the content and faintly tints the background (--o-alert-glass-tint). It follows the app's glass option unless set on the alert, and --o-alert-glass-* tunes it.

  • Emitting close does not hide the alert. The parent owns its visibility, for example with v-if as shown above.

  • The close button is rendered only when closable is true.

  • The close action uses Lucide's X icon; CircleX is reserved for error or invalid states.

  • Because role="alert" is assertive, use this component for important dynamic feedback rather than routine static content.