Icon Box

Container for displaying icons with consistent sizing and alignment.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Icon Box Parts

Structure

The expected structure and composition of the component.

Anatomy

Props

Each component part, its responsibility, and the props it exposes.

<IconBox>

This component extends the JSX div element.

Name
Default
Options
`variant`
`primary`
`primary``secondary``tertiary``success``info``warning``danger``primary-subtle``secondary-subtle``tertiary-subtle``success-subtle``info-subtle``warning-subtle``danger-subtle`
`size`
`md`
`sm``md``lg`
`circle`
—
`true``false`

Examples

Variants

Icon boxes come in a variety of variants, each with its own color and style. Use the variant prop to change the variant of the icon box.

Size

You can change the size of the icon box by using the size prop.

Circle

You can make the icon box circular by using the circle prop.

HeadingInput