Highlight important information or guide users toward key actions.
For a more compact layout, place the icon inside the heading by adding the icon prop to flux:callout.heading instead of the root flux:callout component.
Add action buttons to your callout to provide users with clear next steps.
Add a close button, using the controls slot, to allow users to dismiss callouts they no longer care to see.
Use the color prop to change the color of the callout to match your use case.
Use a custom icon to match your brand or specific use case using the icon slot.
Prop
|
Description
|
---|---|
icon |
Name of the icon displayed next to the heading (e.g., clock). Explore icons
|
icon:variant |
Variant of the icon displayed next to the heading (e.g., outline). Explore icon variants
|
variant |
Options: secondary, success, warning, danger. Default: secondary
|
color |
|
inline |
If true, actions appear inline. Default: false.
|
heading |
Shorthand for flux:callout.heading.
|
text |
Shorthand for flux:callout.text.
|
Slot
|
Description
|
---|---|
icon |
Custom icon displayed next to the heading.
|
actions |
Buttons or links inside the callout (flux:callout.button).
|
controls |
Extra UI elements placed at the top right of the callout (e.g., close button).
|
Prop
|
Description
|
---|---|
icon |
Moves the icon inside the heading instead of the callout root.
|
icon:variant |
Variant of the icon displayed next to the heading (e.g., outline). Explore icon variants
|
Slot
|
Description
|
---|---|
icon |
Custom icon displayed next to the heading.
|
Prop
|
Description
|
---|---|
href |
The URL the link points to.
|
external |
If true, the link opens in a new tab. Default: false.
|