Callout
<wa-callout>
Callouts display important messages inline with surrounding content. Use them to highlight tips, warnings, errors, or other information users should not miss.
Examples
Variants
Set the variant attribute to change the callout's variant.
You can tell by how pretty the callout is.
You can safely exit the app now.
Settings will take effect on next login.
Please login again to continue.
We're very sorry to see you go!
Appearance
Use the appearance attribute to change the callout's visual appearance (the default is filled-outlined).
Sizes
Use the size attribute to change a callout's size.
Without Icons
Icons are optional. Simply omit the icon slot if you don't want them.
Styling
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
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.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/[email protected]/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
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
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
appearanceappearance |
The callout's visual appearance.
Type
'accent' | 'filled' | 'outlined' | 'plain' | 'filled-outlined' |
|
|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
[styles, variantStyles, sizeStyles] |
||
sizesize |
The callout's size.
Type
'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large'Default
'm' |
|
|
variantvariant |
The callout's theme variant. Defaults to
brand if not within another element with a variant.Type
'brand' | 'neutral' | 'success' | 'warning' | 'danger'Default
'brand' |
|
CSS parts
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)
|