Components

Callout

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

Title

Supporting text that explains the callout in more detail.

.ui-callout
Container element.
<svg>
An optional icon. info, warning and critical have a default icon.
.ui-content
The content.
<h3>
An optional title inside the content.

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. Notice the lack of icons - it's not really needed here.

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.

HTML

<article role="note" class="ui-callout">
  <div class="ui-content">
    <h3 class="ui-title">Note</h3>
    <p>
      This is a tonal Callout. Notice the lack of icons - it's not really needed
      here.
    </p>
  </div>
</article>

<article role="note" class="ui-callout ui-outlined">
  <div class="ui-content">
    <h3 class="ui-title">Another Callout</h3>
    <p>
      This is an outlined Callout. Why not use a
      <a class="ui-link" href="/components/card">Card</a> since they look very
      similar? For one, the Callout is a more focused component with different
      properties.
    </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-neutraltone for brand-tinted attention. The default is a plain 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 neutral Callout

This is a tonal info Callout

This is a tonal warning Callout

This is a tonal critical Callout

This is an outlined neutral Callout

This is an outlined info Callout

This is an outlined warning Callout

This is an outlined critical Callout

HTML

<article role="note" class="ui-callout ui-neutral">
  <div class="ui-content">This is a tonal neutral 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-neutral">
  <div class="ui-content">This is an outlined neutral 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 an 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 an 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 an 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.

API

Callout API

Type	Modifiers	Default	Description
Severities	`.ui-critical`, `.ui-info`, `.ui-neutral`, `.ui-success`, `.ui-warning`	-	The severity. Sets the color and the default icon.
Variants	default, `.ui-outlined`	default	The variant to use.

Parts

Part	Description
`.ui-callout`	Container element.
`<svg>`	An optional icon. `info`, `warning` and `critical` have a default icon.
`.ui-content`	The content.
`<h3>`	An optional title inside the content.

The root needs role="note".

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;
}
/* ... */

Callout

Anatomy

Title

Alternatives

Variants

Note

Another Callout

Icon

Severities

Accessibility

API

Callout API

Parts

Browser support

Installation