Alert

Alerts call out for user attention. Alerts should be part of the flow and used without interrupting the user's task.

Alternatives

You might want to check out:

• Dialog: takes over completely
• Snackbar: informative but non-interruptive

Variants

Tonal (default) and outlined.

Note

This is a tonal Alert. Notice the lack of icons - it's not really needed here.

Another Alert

This is an outlined Alert. Why not use a Card since they look very similar? For one, the Alert is a more focused component with different properties.

<article role="alert" class="alert">
  <div class="content">
		<h3>Note</h3>
		<p>This is a tonal Alert!</p>
	</div>
</article>

<article role="alert" class="alert outlined">
  <div class="content">
		<h3>Note</h3>
		<p>This is an outlined Alert!</p>
	</div>
</article>

Icon

Icon must be placed before the content.

This is a tonal Alert with an icon.

<article role="alert" class="alert">
  <svg></svg>
  <div class="content">This is a tonal Alert with an icon.</div>
</article>

Severities

There are four different severities - neutral (default), info, warning, danger.

Icons and accessibility

Omitting an icon is possible. However, it helps having one if you need to convey a specific kind of severity in your Alert message. For instance, colorblind users might be left confused if there's not enough visual guidance.

This is a tonal info Alert

This is a tonal warning Alert

This is a tonal danger Alert

This is an outlined info Alert

This is an outlined warning Alert

This is an outlined danger Alert

<article role="alert" class="alert info">
  <svg></svg>
  <div class="content">Warning</div>
</article>

Accessibility

• Add role="alert" to the Alert container.
• Use both color and icon to help distinguish between Alert severities.
• Don't interrupt the user with an Alert. In that case, use Dialog or Snackbar.

Anatomy

1. Container: must have role="alert"
2. Content: text, or wrapper with .container class.
3. Icon (optional): <svg> element

Another Alert

This is an outlined Alert. Why not use a Card since they look very similar? For one, the Alert is a more focused component with different properties.

<article role="alert" class="alert outlined">
  <svg></svg>

  <div class="content">
    <h3>Another Alert</h3>
    <p>
      This is an outlined Alert. Why not use a
      <a class="link" href="#">Card</a> since they look very similar? For one,
      the Alert is a more focused component with different properties.
    </p>
  </div>
</article>

API

Type	Modifiers	Default	Description
Children	& > .content, & > svg	-	Optional child content.
Severities	neutral, .danger, .info, .warning	neutral	The severity to use.
Variants	.tonal, .outlined	.tonal	The variant to use.

Browser compatibility

Installation

alert.css

:where(.alert) {
  --_bg-color: var(--surface-tonal);
  --_border-color: var(--surface-tonal);
  --_color: var(--text-color-1);

  &.outlined {
    --_bg-color: var(--surface-default);
    --_border-color: var(--border-color);
    --_color: var(--text-color-1);
  }

  background-color: var(--_bg-color);
  border: 1px solid var(--_border-color);
  border-radius: var(--surface-border-radius);
  color: var(--_color);
  line-height: 1.43;
  padding: var(--size-3);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: inherit;
  }

  &:has(h1, h2, h3, h4, h5, h6) p {
    color: inherit;
    font-size: var(--font-size-sm);
    margin-block-start: var(--size-2);
  }

  /* Colors */
  &.danger,
  &.info,
  &.warning {
    --_bg-color: var(--color-3);
    --_border-color: var(--color-7);
    --_color: var(--gray-14);

    svg {
      stroke: var(--color-7);
    }

    &.outlined {
      --_bg-color: var(--surface-default);
      --_border-color: var(--color-9);
      --_color: var(--text-color-1);
    }
  }

  /* Icon */
  &:has(svg) {
    align-items: center;
    display: grid;
    gap: var(--size-3);
    grid-template-columns: var(--size-4, 1.25rem) 1fr;
  }
}

theme.css

/* ... */
.danger {
  --palette-hue: var(--oklch-red, 25);
  --palette-chroma: 1;
  --palette-hue-rotate-by: 1;
}
.info {
  --palette-hue: var(--oklch-indigo, 310);
  --palette-chroma: 1;
  --palette-hue-rotate-by: 1;
}
.warning {
  --palette-hue: var(--oklch-orange, 75);
  --palette-chroma: 1;
  --palette-hue-rotate-by: 1;
}
/* ... */