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


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.