Nitpick is still pre-release.

Don't use it in production yet, the lib is still being ideated and its style will change. Feel free to contribute on GitHub.

components

callout

Callout

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.

Demo

Callout

This is a simple callout

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?

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

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!

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.

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.

Contents