Components

Callout

Callouts call out for user attention. 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
Toast: informative but non-interruptive

Variants

Tonal (default) and .ui-outlined variants.

Note

This is a tonal Callout!

Note

This is an outlined Callout!

HTML

<article role="note" class="ui-callout">
  <div class="ui-content">
    <h3>Note</h3>
    <p>This is a tonal Callout!</p>
  </div>
</article>

<article role="note" class="ui-callout ui-outlined">
  <div class="ui-content">
    <h3>Note</h3>
    <p>This is an outlined Callout!</p>
  </div>
</article>

Icon

Icon must be placed before the content.

This is a tonal Callout with an icon.

HTML

<article role="note" class="ui-callout">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
    ></path>
  </svg>
  <div class="ui-content">This is a tonal Callout with an icon.</div>
</article>

Severities

Severity modifiers — .ui-info, .ui-success, .ui-warning, .ui-critical — plus the non-severity .ui-primary tone for brand-tinted attention. The default is a neutral surface.

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 Callout message. For instance, colorblind users might be left confused if there's not enough visual guidance.

This is a tonal primary Callout

This is a tonal info Callout

This is a tonal warning Callout

This is a tonal critical Callout

This is an outlined primary Callout

This is a outlined info Callout

This is a outlined warning Callout

This is a outlined critical Callout

HTML

<article role="note" class="ui-callout ui-primary">
  <div class="ui-content">This is a tonal primary Callout</div>
</article>

<article role="note" class="ui-callout ui-info">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
    ></path>
  </svg>
  <div class="ui-content">This is a tonal info Callout</div>
</article>

<article role="note" class="ui-callout ui-warning">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
    ></path>
  </svg>
  <div class="ui-content">This is a tonal warning Callout</div>
</article>

<article role="note" class="ui-callout ui-critical">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 48 48"
  >
    <path
      fill="currentColor"
      d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
    ></path>
  </svg>
  <div class="ui-content">This is a tonal critical Callout</div>
</article>

<article role="note" class="ui-callout ui-outlined ui-primary">
  <div class="ui-content">This is an outlined primary Callout</div>
</article>

<article role="note" class="ui-callout ui-outlined ui-info">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
    ></path>
  </svg>
  <div class="ui-content">This is a outlined info Callout</div>
</article>

<article role="note" class="ui-callout ui-outlined ui-warning">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
    ></path>
  </svg>
  <div class="ui-content">This is a outlined warning Callout</div>
</article>

<article role="note" class="ui-callout ui-outlined ui-critical">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 48 48"
  >
    <path
      fill="currentColor"
      d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
    ></path>
  </svg>
  <div class="ui-content">This is a outlined critical Callout</div>
</article>

Accessibility

Add role="note" to the Callout container.
Use both color and icon to help distinguish between Callout severities.
Don't interrupt the user with a Callout. In that case, use Dialog or Toast.

Anatomy

Container: must have role="note".
Content: text, or wrapper with .ui-content class.
Icon (optional): <svg> element.

Another Callout

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

API

Type	Modifiers	Default	Description
Part	`& > .ui-content`, `& > svg`	-	Internal structure.
Severities	`.ui-critical`, `.ui-info`, `.ui-primary`, `.ui-success`, `.ui-warning`	-	Severity modifiers.
Variants	`.ui-tonal`, `.ui-outlined`	`.ui-tonal`	Style modifiers.

Browser support

See also the full browser support guide.

Installation

callout.css

@layer components.root {
  :where(.ui-callout) {
    --_bg-color: var(--surface-tonal);
    --_border-color: var(--surface-tonal);
    --_color: var(--text-primary);
    --_icon-color: currentColor;
    --_link-hover-color: var(--primary);
    --_padding: var(--size-3);
    --_border-radius: var(--border-radius);
    --_gap: var(--size-3);
    --_content-gap: var(--size-2);
    --_font-size: var(--font-size-05);
    --_title-font-size: var(--font-size-1);
    --_icon-size: var(--size-4);
    --_surface-bg: var(--surface-default);

    --_outlined-bg-color: var(--surface-default);
    --_outlined-border-color: var(--border-color);
    --_outlined-color: var(--text-primary);
    --_outlined-icon-color: currentColor;

    background-color: var(--_bg-color, var(--_surface-bg));
    border: 1px solid var(--_border-color, var(--border-color));
    border-radius: var(--_border-radius);
    color: var(--_color);
    isolation: isolate;
    padding: var(--_padding);
    position: relative;

    &.ui-critical,
    &.ui-info,
    &.ui-neutral,
    &.ui-success,
    &.ui-warning {
      --_bg-color: light-dark(
        oklch(from var(--color-2) l c h / 20%),
        oklch(from var(--color-6) l c h / 5%)
      );
      --_border-color: light-dark(var(--color-5), var(--color-11));
      --_color: light-dark(var(--color-16), var(--color-1));
      --_icon-color: var(--color-9);

      --_outlined-bg-color: var(--surface-default);
      --_outlined-border-color: var(--color-9);
      --_outlined-color: light-dark(var(--color-15), var(--color-1));
      --_outlined-icon-color: var(--color-9);
    }

    &.ui-outlined {
      --_bg-color: var(--_outlined-bg-color);
      --_border-color: var(--_outlined-border-color);
      --_color: var(--_outlined-color);
      --_icon-color: var(--_outlined-icon-color);
    }

    &::before {
      background-color: var(--_bg-color);
      border-radius: inherit;
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: -1;
    }

    & > .ui-content {
      display: grid;
      font-size: var(--_font-size);
      gap: var(--_content-gap);

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

        * {
          font-size: inherit;
        }
      }
    }

    /* Links
    * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
    */
    &:not(.ui-outlined) {
      a[href] {
        color: inherit;

        &:hover {
          color: var(--_link-hover-color);
        }
      }
    }

    /* Icon */
    &:has(svg) {
      display: grid;
      gap: var(--_gap);
      grid-template-columns: var(--_icon-size) 1fr;

      svg {
        margin-block-start: 0.15rem;
        stroke: var(--_icon-color);
      }
    }
  }
}

theme tokens (snippet)

/* ... */
.ui-critical {
  --palette-source: oklch(0.58 0.21 var(--hue-red));
  --palette-hue-rotate-by: 1;
}
.ui-info {
  --palette-source: oklch(0.58 0.21 var(--hue-blue));
  --palette-hue-rotate-by: 1;
}
.ui-success {
  --palette-source: oklch(0.58 0.21 var(--hue-green));
  --palette-hue-rotate-by: 1;
}
.ui-warning {
  --palette-source: oklch(0.58 0.21 var(--hue-orange));
  --palette-hue-rotate-by: 1;
}
/* ... */