Callout
<quiet-callout>
Callouts draw attention to important information, provide context, or prompt users to take action.
<quiet-callout variant="primary"> <quiet-icon slot="icon" name="book"></quiet-icon> A playful cat's antics can brighten any day with their boundless energy and curiosity. Watching a cat pounce and chase after toys is an endless source of entertainment. </quiet-callout>
Examples Jump to heading
Variants Jump to heading
Callouts have four built-in variants. Set the variant attribute to default,
primary, constructive, or destructive to change the callout's
appearance.
<quiet-callout variant="default"> This is a default callout. Use me for informative content. </quiet-callout> <quiet-callout variant="primary"> This is a primary callout. Use me for informative content that stands out. </quiet-callout> <quiet-callout variant="constructive"> This is a constructive callout. Use me to show confirmations. </quiet-callout> <quiet-callout variant="destructive"> This is a destructive callout. Use me when danger lies ahead. </quiet-callout>
Adding icons Jump to heading
Add an icon to a callout using the icon slot. Works best with
<quiet-icon> and <svg> elements.
<quiet-callout variant="default"> <quiet-icon slot="icon" name="settings"></quiet-icon> Sleep mode has been enabled. You can disable it in settings. </quiet-callout> <quiet-callout variant="primary"> <quiet-icon slot="icon" name="info-circle"></quiet-icon> A cat's soft, gentle gaze can melt even the coldest of hearts. </quiet-callout> <quiet-callout variant="constructive"> <quiet-icon slot="icon" name="circle-check"></quiet-icon> Great job! The litter box has been successfully cleaned. </quiet-callout> <quiet-callout variant="destructive"> <quiet-icon slot="icon" name="alert-triangle"></quiet-icon> Doing this will anger the cats. Are you sure you want to continue? </quiet-callout>
Changing the size Jump to heading
Callouts are sized relative to the current font size. To change their size, apply font-size to
the callout or an ancestor element.
<quiet-callout variant="primary" style="font-size: 1.25rem;"> <quiet-icon slot="icon" name="rocket"></quiet-icon> It's a magical world, ol' buddy…let's go exploring! </quiet-callout> <quiet-callout variant="constructive" style="font-size: 1.25rem;"> <quiet-icon slot="icon" name="bulb"></quiet-icon> You know what's weird? Day by day nothing seems to change, but pretty soon…everything is different. </quiet-callout>
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-callout> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/callout/callout.js';
To manually import <quiet-callout> from npm, use the following code.
import '@quietui/quiet/dist/components/callout/callout.js';
Slots Jump to heading
Callout supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | Content to show in the callout. |
icon
|
An optional icon to show in the callout. Works well with <quiet-icon> and
<svg> elements.
|
Properties Jump to heading
Callout has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
variant
|
The type of callout to render. |
|
'default'
|
'default'
|
CSS parts Jump to heading
Callout exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
icon |
The container the wraps the icon. |
::part(icon)
|
body |
The container that wraps the callout's content. |
::part(body)
|