Button

Trigger actions and events with clickable interactive elements.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Button Parts

Structure

The expected structure and composition of the component.

Anatomy

Props

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

<Button>

This component extends the JSX button element.

Name
Default
Options
`variant`
`primary`
`primary``secondary``tertiary``danger``outline``plain`
`size`
`md`
`xs``sm``md``lg``icon``xs-icon``sm-icon``lg-icon`
`block`
—
`true``false`
`pill`
—
`true``false`
`progress`
—
`true``false`

Examples

Variants

The variant prop can be used to change the variant of the button.

Outline

Outline buttons are buttons that have a border. This can be achieved by using the variant="outline" prop.

Plain

Plain button is a button that has no background color. This can be achieved by using the variant="plain" prop.

Size

Buttons come in a variety of sizes. Use the size prop to change the size of the button.

Block

Use the block prop to make the button fill the width of its container.

Pill

Use the pill prop to create a pill-shaped button.

Icon

Buttons can have icons. Place the icon inside the button and it will be sized automatically. You can also use the size="icon" prop to create an icon-only button.

Progress

Use the progress prop to show a loading indicator.

Icon with Progress

When using an icon with progress, the icon will be hidden during the loading state and the spinner will be shown instead.

You may want to use buttons as links. This can be achieved by using the render prop to render a custom element.

Disabled

Use the disabled prop to make the button disabled.

BadgeCard