Skip to main content
Github repo

Theme config

Theme mode
Color palette
Grays
Border radii/radiuses/radiopedes/you know
Border radius
Field border radius
Button border radius
Get CSS
All
Components
Guides
API
Recent
↑↓ Navigate
←→ Category
↵ Select
esc Close

Components

Callout

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

Full support Supported since v125. Full support Supported since v128. Full support Supported since v18.

Alternatives

You might want to check out:

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

Variants

Tonal (default) and outlined variants are available via the variant prop.

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. 

---
import { Callout } from "@opui/astro"
---


<Callout>
  <Fragment slot="title">Note</Fragment>
  <p>
    This is a tonal Callout. Notice the lack of icons - it's not really needed
    here.
  </p>
</Callout>
<Callout variant="outlined">
  <Fragment slot="title">Another Callout</Fragment>
  <p>
    This is an outlined Callout. Why not use a <a
      class="link"
      href="/components/card">Card</a
    > since they look very similar? For one, the Callout is a more focused component
    with different properties.
  </p>
</Callout>
<article role="note" class="callout">
  <div class="content">
    <h3 class="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="callout outlined">
  <div class="content">
    <h3 class="title">Another Callout</h3>
    <p>
      This is an outlined Callout. Why not use a
      <a class="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

Icons are placed in the icon slot. You can also modify the component so you don't have to do it manually every time.

This is a tonal Callout with an icon.
---
import { Callout } from "@opui/astro"
---


<Callout>
  <svg
    slot="icon"
    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
  >
  This is a tonal Callout with an icon.
</Callout>
<article role="note" class="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="content">This is a tonal Callout with an icon.</div>
</article>

Severities

The severity prop accepts info, success, warning, and critical, plus a non-severity 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 an outlined info Callout
This is an outlined warning Callout
This is an outlined critical Callout
---
import { Callout } from "@opui/astro"
---


<Callout severity="neutral">This is a tonal primary Callout</Callout>
<Callout severity="info">
  <svg
    slot="icon"
    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
  >
  This is a tonal info Callout
</Callout>
<Callout severity="warning">
  <svg
    slot="icon"
    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
  >
  This is a tonal warning Callout
</Callout>
<Callout severity="critical">
  <svg
    slot="icon"
    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
  >This is a tonal critical Callout
</Callout>


<Callout variant="outlined" severity="neutral"
  >This is an outlined primary Callout</Callout
>
<Callout variant="outlined" severity="info">
  <svg
    slot="icon"
    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
  >
  This is an outlined info Callout
</Callout>
<Callout variant="outlined" severity="warning">
  <svg
    slot="icon"
    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
  >
  This is an outlined warning Callout
</Callout>
<Callout variant="outlined" severity="critical">
  <svg
    slot="icon"
    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
  >This is an outlined critical Callout
</Callout>
<article role="note" class="callout neutral">
  <div class="content">This is a tonal primary Callout</div>
</article>
<article role="note" class="callout 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="content">This is a tonal info Callout</div>
</article>
<article role="note" class="callout 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="content">This is a tonal warning Callout</div>
</article>
<article role="note" class="callout 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="content">This is a tonal critical Callout</div>
</article>
<article role="note" class="callout outlined neutral">
  <div class="content">This is an outlined primary Callout</div>
</article>
<article role="note" class="callout outlined 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="content">This is an outlined info Callout</div>
</article>
<article role="note" class="callout outlined 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="content">This is an outlined warning Callout</div>
</article>
<article role="note" class="callout outlined 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="content">This is an outlined critical Callout</div>
</article>

Accessibility

  • The role="note" attribute is automatically added 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

  1. Container: the <Callout> component.
  2. Content: text, or wrapper with .content class.
  3. Icon (optional): <svg slot="icon"> 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

Prop Type Default Description
variant "tonal" | "outlined" "tonal" The visual style of the callout.
severity "ok" | "warning" | "critical" - The severity level, affecting the color and icon.

Browser support

Full support Supported since v125. Full support Supported since v128. Full support Supported since v18.

See also the full browser support guide.

Installation

@layer components.root {
  :where(.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;


    &.critical,
    &.info,
    &.neutral,
    &.success,
    &.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);
    }


    &.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;
    }


    &>.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(.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);
      }
    }
  }
}
/* ... */
.critical {
  --palette-source: oklch(0.58 0.21 var(--hue-red));
  --palette-hue-rotate-by: 1;
}
.info {
  --palette-source: oklch(0.58 0.21 var(--hue-blue));
  --palette-hue-rotate-by: 1;
}
.success {
  --palette-source: oklch(0.58 0.21 var(--hue-green));
  --palette-hue-rotate-by: 1;
}
.warning {
  --palette-source: oklch(0.58 0.21 var(--hue-orange));
  --palette-hue-rotate-by: 1;
}
/* ... */