<wa-callout>
Callouts are used to display important messages inline.
<wa-callout> <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon> This is a standard callout. You can customize its content and even the icon. </wa-callout>
Set the variant attribute to change the callout's variant.
<wa-callout variant="brand"> <wa-icon slot="icon" name="circle-info" variant="regular"></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" variant="regular"></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" variant="regular"></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" variant="regular"></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" variant="regular"></wa-icon> <strong>Your account has been deleted</strong><br /> We're very sorry to see you go! </wa-callout>
Icons are optional. Simply omit the icon slot if you don't want them.
<wa-callout variant="brand"> Nothing fancy here, just a simple callout. </wa-callout>
| Name | Description |
|---|---|
| (default) | The callout's main content. |
icon
|
An icon to show in the callout. Works best with <wa-icon>.
|
| Name | Description | Reflects | |
|---|---|---|---|
variantvariant
|
The callout's theme variant.
Type
'brand' | 'success' | 'neutral' | 'warning' | 'danger'
Default
'brand'
|
|
| Name | Description |
|---|---|
--background-color |
The callout's background color.
|
--border-color |
The color of the callout's border.
|
--border-radius |
The radius of the callout's corners.
|
--border-style |
The style of the callout's borders.
|
--border-width |
The width of the callout's borders.
|
--content-color |
The color of the callout's content.
|
--icon-color |
The color of the callout's icon.
|
--icon-size |
The size of the callout's icon.
|
--spacing |
The amount of space around and between the callout's content. Expects a single value.
|
| Name | Description |
|---|---|
base |
The component's base wrapper. |
icon |
The container that wraps the optional icon. |
message |
The container that wraps the callout's main content. |
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/callout/callout.js';