Callout

<wa-callout>

Stable

Callouts display important messages inline with surrounding content. Use them to highlight tips, warnings, errors, or other information users should not miss.

This is a standard callout. You can customize its content and even the icon.

<wa-callout>
  <wa-icon slot="icon" name="circle-info"></wa-icon>
  This is a standard callout. You can customize its content and even the icon.
</wa-callout>

Examples

Link to This Section

Variants

Link to This Section

Set the variant attribute to change the callout's variant.

  
  This is super informative

  You can tell by how pretty the callout is.

  Your changes have been saved

  You can safely exit the app now.

  Your settings have been updated

  Settings will take effect on next login.

  Your session has ended

  Please login again to continue.

  Your account has been deleted

  We're very sorry to see you go!

  Just so you know

  Here's some additional information you might find useful.

<wa-callout variant="brand">
  <wa-icon slot="icon" name="circle-info"></wa-icon>
  <strong>This is super informative</strong><br />
  You can tell by how pretty the callout is.
</wa-callout>

<br />

<wa-callout variant="success">
  <wa-icon slot="icon" name="circle-check"></wa-icon>
  <strong>Your changes have been saved</strong><br />
  You can safely exit the app now.
</wa-callout>

<br />

<wa-callout variant="neutral">
  <wa-icon slot="icon" name="gear"></wa-icon>
  <strong>Your settings have been updated</strong><br />
  Settings will take effect on next login.
</wa-callout>

<br />

<wa-callout variant="warning">
  <wa-icon slot="icon" name="triangle-exclamation"></wa-icon>
  <strong>Your session has ended</strong><br />
  Please login again to continue.
</wa-callout>

<br />

<wa-callout variant="danger">
  <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
  <strong>Your account has been deleted</strong><br />
  We're very sorry to see you go!
</wa-callout>

<br />

<wa-callout variant="info">
  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
  <strong>Just so you know</strong><br />
  Here's some additional information you might find useful.
</wa-callout>

Appearance

Link to This Section

Use the appearance attribute to change the callout's visual appearance (the default is filled-outlined).

  
  This accent callout draws attention

  This callout is both filled and outlined

  This callout is only filled

  Here's an outlined callout

  No bells and whistles on this plain callout

<wa-callout variant="brand" appearance="accent">
  <wa-icon slot="icon" name="square-check"></wa-icon>
  This <strong>accent</strong> callout draws attention
</wa-callout>

<br />

<wa-callout variant="brand" appearance="filled-outlined">
  <wa-icon slot="icon" name="fill-drip"></wa-icon>
  This callout is both <strong>filled</strong> and <strong>outlined</strong>
</wa-callout>

<br />

<wa-callout variant="brand" appearance="filled">
  <wa-icon slot="icon" name="fill"></wa-icon>
  This callout is only <strong>filled</strong>
</wa-callout>

<br />

<wa-callout variant="brand" appearance="outlined">
  <wa-icon slot="icon" name="lines-leaning"></wa-icon>
  Here's an <strong>outlined</strong> callout
</wa-callout>

<br />

<wa-callout variant="brand" appearance="plain">
  <wa-icon slot="icon" name="font"></wa-icon>
  No bells and whistles on this <strong>plain</strong> callout
</wa-callout>

Sizes

Link to This Section

Use the size attribute to change a callout's size.

  
  Extra-small callout for minimal emphasis.

  Small callout for a bit of emphasis.

  Medium callout, the default size.

  Large callout for more emphasis.

  Extra-large callout for maximum emphasis.

<wa-callout size="xs">
  <wa-icon slot="icon" name="circle-info"></wa-icon>
  Extra-small callout for minimal emphasis.
</wa-callout>

<br />

<wa-callout size="s">
  <wa-icon slot="icon" name="circle-info"></wa-icon>
  Small callout for a bit of emphasis.
</wa-callout>

<br />

<wa-callout size="m">
  <wa-icon slot="icon" name="circle-info"></wa-icon>
  Medium callout, the default size.
</wa-callout>

<br />

<wa-callout size="l">
  <wa-icon slot="icon" name="circle-info"></wa-icon>
  Large callout for more emphasis.
</wa-callout>

<br />

<wa-callout size="xl">
  <wa-icon slot="icon" name="circle-info"></wa-icon>
  Extra-large callout for maximum emphasis.
</wa-callout>

Without Icons

Link to This Section

Icons are optional. Simply omit the icon slot if you don't want them.

Nothing fancy here, just a simple callout.

<wa-callout variant="brand"> Nothing fancy here, just a simple callout. </wa-callout>

Styling

Link to This Section

You can customize the callout's appearance mostly by setting regular CSS properties. background, border, border-radius, color, padding, margin, etc. work as expected.

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.17.0/components/callout/callout.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/callout/callout.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/callout/callout.js';

To import this component for React 18 or below, use the following code:

import WaCallout from '@awesome.me/webawesome/dist/react/callout/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	The callout's main content.
`icon`	An icon to show in the callout. Works best with `<wa-icon>`.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`appearance` `appearance`	The callout's visual appearance. Type `'accent' \| 'filled' \| 'outlined' \| 'plain' \| 'filled-outlined'`
`size` `size`	The callout's size. Type `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'small' \| 'medium' \| 'large'` Default `'m'`
`variant` `variant`	The callout's theme variant. Defaults to `brand` if not within another element with a variant. Type `'brand' \| 'neutral' \| 'success' \| 'warning' \| 'danger' \| 'info'` Default `'brand'`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`icon`	The container that wraps the optional icon.	`::part(icon)`
`message`	The container that wraps the callout's main content.	`::part(message)`

Need a hand?

Report a bug

Ask for help

Callout

Examples

Variants

Appearance

Sizes

Without Icons

Styling

Importing

Slots

Attributes & Properties

CSS Parts

Quick Links

Recent Searches