v0.9.8defuss-shadcn
Theme
Design your own

defuss-shadcn / Feedback & Status / alert

Built with: CSS

AlertMOL

A callout for important messages. Supports default and destructive variants with optional icons and actions.

On this page (5)
Component Skill — components/alert/component-skill.md

Native basis

<div> with role="alert" for important callout messages.

Web Platform APIs

role="alert"

Classes

.alert.alert-title.alert-description.alert-icon.alert-content.alert-action

Variants (data-variant)

destructiveColor variation

§Default

Informational alert with icon, title, and description.

§Destructive

Error or warning variant.

§With Action

Alert with an action button.

§Density

Set data-density on the component root to scale its internal whitespace. A whitespace policy, not a zoom: only padding and the icon gap scale (ratio 0.75 / 1 / 1.25), typography stays identical. comfortable matches the unsized default.

§CSS view file

Styles for the alert component. Uses design tokens for colors, spacing, and radius.

@layer components {
  .alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--foreground);
    background-color: var(--background);
    &[data-variant="destructive"] {
      border-color: var(--destructive);
      color: var(--destructive);
      & .alert-title {
        color: var(--destructive);
      }
      & .alert-description {
        color: var(--destructive);
        opacity: 0.9;
      }
      & .alert-icon {
        color: var(--destructive);
      }
    }
  }
  .alert-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--foreground);
  }
  .alert-content {
    flex: 1;
    min-width: 0;
  }
  /* -- Density --------------------------------------------------
     data-density on the .alert root scales its padding and the icon/content
     gap (ratio 0.75 / 1 / 1.25); comfortable matches the unsized default. */
  .alert:where([data-density="compact"]) {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }
  .alert:where([data-density="comfortable"]) {
    padding: 1rem 1.25rem;
    gap: 0.75rem;
  }
  .alert:where([data-density="spacious"]) {
    padding: 1.25rem 1.5rem;
    gap: 1rem;
  }
  .alert-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--foreground);
  }
  .alert-description {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted-foreground);
  }
  .alert-action {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub