3.0.0-alpha.9 Alpha
Components

Callout

<wa-callout> Since 2.0 Stable

Callouts are used to display important messages inline.

Just want the styles? Check out the Callout native styles!
This is a standard callout. You can customize its content and even the icon. 
<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>

Examples

Variants

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! 
<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>

Appearance

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

This accent callout is also outlined
This accent callout draws attention without an outline
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="outlined accent">
  <wa-icon slot="icon" name="check-to-slot"></wa-icon>
  This <strong>accent</strong> callout is also <strong>outlined</strong>
</wa-callout>

<br />

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

<br />

<wa-callout variant="brand" appearance="outlined filled">
  <wa-icon slot="icon" name="fill-drip" variant="regular"></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" variant="regular"></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" variant="regular"></wa-icon>
  Here's an <strong>outlined</strong> callout
</wa-callout>

<br />

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

Sizes

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

This is meant to be very emphasized. Normal-sized callout. Just a small tip! 
<wa-callout variant="brand" appearance="outlined accent" size="large">
  <wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>
  This is meant to be very emphasized.
</wa-callout>
<wa-callout>
  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
  Normal-sized callout.
</wa-callout>
<wa-callout variant="plain" appearance="plain" size="small">
  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
  Just a small tip!
</wa-callout>

Without Icons

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

You can customize the callout's appearance mostly by setting regular CSS properties:

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
variant
variant
The callout's theme variant.
Type 'brand' | 'success' | 'neutral' | 'warning' | 'danger'
Default 'brand'
appearance
appearance
The callout's visual appearance.
Type  'accent' | 'filled' | 'outlined' | 'plain' | 'outlined filled' | 'outlined accent'
Default 'outlined filled'
size
size
The callout's size.
Type 'small' | 'medium' | 'large'
Default 'medium'

CSS custom properties

Learn more about CSS custom properties.

Name Description
--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. If you want different spacing around and between the content, use padding on the callout itself.

CSS parts

Learn more about CSS parts.

Name Description
icon The container that wraps the optional icon.
message The container that wraps the callout's main content.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/components/callout/callout.js';
 Coming soon! Coming soon!
    No results