Callout

Stand out from the crowd with our Callout. Highlight the gems of your content that just shouldn't be missed

1  import { Callout, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' justify='center'>
4    <Callout><RandomQuote /></Callout>
5  </FlexBox>
6

Note: The RandomQuote component is a custom component as part of this documentation site. It is not part of the UI library.

Component	Description
Callout	The attention grabber. A visually prominent component that highlights essential information or actions, making sure your users don't miss what's crucial in your UI.
Callout.Barebone	The minimalist herald. A streamlined version of the Callout, stripped of any extra flair, focusing purely on delivering your message with clarity.
Callout.Content	The heart of the message. The central section of the Callout where the actual text or content resides, conveying the information or alert to the user.
Callout.Icon	The visual messenger. It's the part of the Callout that uses an icon to visually reinforce the context and importance of the message it accompanies.

Prop	Type	Default	Explanation
`variant`	`string`	default	The variant of the Callout. Determines the color and icon of the component.
`showIcon`	`boolean`	true	Whether to show the icon or not.

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius