Base

Class	Description
.ui-alert	Base class

Variant

Class	Value
.ui-alert--info	info
.ui-alert--success	success
.ui-alert--warning	warning
.ui-alert--danger	danger

Size

Class	Value
.ui-alert--sm	sm
.ui-alert--lg	lg

Dismissible

Class	Description
.ui-alert--dismissible	dismissible

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-alert-accent	var(--ui-color-border)	Accent color
--ui-alert-padding	var(--ui-space-2)	Padding on all sides
--ui-alert-border-width	var(--ui-border-width-sm)	Border thickness
--ui-alert-gap	var(--ui-space-1)	Gap between children
--ui-alert-radius	var(--ui-radius-md)	Corner radius
--ui-alert-color	var(--ui-color-text)	Text color
--ui-alert-font-size	inherit	Font size
--ui-alert-padding-sm	var(--ui-space-1)	Padding on all sides at small size
--ui-alert-gap-sm	calc(var(--ui-unit) * 0.5)	Gap between children at small size
--ui-alert-font-size-sm	var(--ui-font-size-sm)	Font size at small size
--ui-alert-padding-lg	var(--ui-space-4)	Padding on all sides at large size
--ui-alert-gap-lg	var(--ui-space-2)	Gap between children at large size
--ui-alert-font-size-lg	var(--ui-font-size-lg)	Font size at large size
--ui-alert-padding-end	calc(var(--ui-unit) * 5)	Padding end

<div class="ui-column" style="--column-gap: var(--ui-space-2);">
  <div class="ui-alert ui-alert--info">
    <div class="ui-alert__content">
      <p class="ui-alert__title">Info</p>
      <p class="ui-alert__description">Informational message for the user.</p>
    </div>
  </div>
  <div class="ui-alert ui-alert--success">
    <div class="ui-alert__content">
      <p class="ui-alert__title">Success</p>
      <p class="ui-alert__description">Your action was completed successfully.</p>
    </div>
  </div>
  <div class="ui-alert ui-alert--warning">
    <div class="ui-alert__content">
      <p class="ui-alert__title">Warning</p>
      <p class="ui-alert__description">Please review before continuing.</p>
    </div>
  </div>
  <div class="ui-alert ui-alert--danger">
    <div class="ui-alert__content">
      <p class="ui-alert__title">Error</p>
      <p class="ui-alert__description">Something went wrong. Please try again.</p>
    </div>
  </div>
</div>

<div class="ui-alert ui-alert--info">
  <svg class="ui-icon ui-icon--sm ui-alert__icon" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4"></path>
    <path d="M12 8h.01"></path>
  </svg>
  <div class="ui-alert__content">
    <p class="ui-alert__description">Your session will expire in 5 minutes.</p>
  </div>
</div>

<div class="ui-alert ui-alert--success">
  <div class="ui-alert__content">
    <p class="ui-alert__description">File uploaded successfully.</p>
  </div>
</div>

<div class="ui-column" style="--column-gap: var(--ui-space-2);">
  <div class="ui-alert ui-alert--info ui-alert--sm">
    <div class="ui-alert__content">
      <p class="ui-alert__description">Small alert with compact padding.</p>
    </div>
  </div>
  <div class="ui-alert ui-alert--info">
    <div class="ui-alert__content">
      <p class="ui-alert__description">Default alert size.</p>
    </div>
  </div>
  <div class="ui-alert ui-alert--info ui-alert--lg">
    <div class="ui-alert__content">
      <p class="ui-alert__description">Large alert with extra padding.</p>
    </div>
  </div>
</div>

<div class="ui-alert ui-alert--info ui-alert--dismissible">
  <div class="ui-alert__content">
    <p class="ui-alert__title">Dismissible</p>
    <p class="ui-alert__description">This alert can be closed by the user.</p>
  </div>
  <button class="ui-alert__close ui-close-button" aria-label="Close"></button>
</div>