Callout

Learn about the Callout component and how to use it.

Callout component has a distinct look meant to draw reader's attention, so that critical information is more noticeable. This is how the component looks like:

This is how a callout looks like

Add callout

Import the component from the callout folder:

import { Callout } from '../components/callout';

Specify the callout style using the type prop. It supports 4 values: info,caution,warning,success:

<Callout type="info">
  Callout message
</Callout>

Examples:

Info — hint or general information.

Caution — critical information telling what's blocking.

Warning — important information that may affect user's workflow.

Success — message tells that all works.

Customize callout appearance

Adjust component's style by modifying the Callout.tsx.