Box

A colored container for callouts, alerts, and grouped content.

Examples

Variants

This is an info box.

This is a success box.

This is a warning box.

This is an error box.

<Box variant="info">This is an info box.</Box>
<Box variant="success">This is a success box.</Box>
<Box variant="warning">This is a warning box.</Box>
<Box variant="error">This is an error box.</Box>

Custom colors

Custom purple box

<Box bg-color="#f0e6ff" text-color="#4a1d96">Custom purple box</Box>

Props

Prop	Type	Required	Default
variant	BoxVariant	No	—
bgColor	string	No	—
textColor	string	No	—
role	string	No	—