🧨Pre-releaseYou shouldn't use this library-1 min read

Callout

Bring something to the attention of your users with the <Callout />
component.

Demo

The Callout
component is used to bring something to the attention of your users. It's a versatile component that can be used in a variety of ways.

Callout

This is a simple callout

Fetching demo

Variants

Note

The note
variant is the default variant you see in the demo above.

Take note!

This is the default variant for a callout, it's just a note, and ironically doesn't display as a note icon by default. Makes you think, huh?

Fetching demo

Tip

Offer small bits of helpful information to your users with a tip. Tips will display as a light bulb by default.

Want a tip?

You should dress like that more often, you look really great today! :)

Fetching demo

Warning

Callouts are a great way to warn users before they do something that they might not actually want to do. A warning will display as yellow with the flag icon by default.

This could be dangerous

Please consider the ramifications of what you are about to do first, you could seriously hurt your ego by deploying untested code!

Fetching demo

Customisation

Change and disable the icon

Nitpick may be opinionated, but it's not cruel. You can adjust the icon with the icon
prop, and disable it altogether by using disableIcon
.

Throw a housewarming?

Of course! Your friends and coworkers will bring you gifts!

No icon here!

Thanks to a single prop change.

Fetching demo

Full customisation

You can of course use the standard rootClassName
prop to add your own custom styles to the Callout
component.

Custom Callout

A fully customised callout.

Fetching demo

Contents

Change and disable the icon

Full customisation

Made by .