@dreamtec-ui/button

Buttons are used as triggers for actions.

Installation

yarn add @dreamtec-ui/button

Import component

import { Button } from "@dreamtec-ui/button"

Usage

<Button>Default</Button>

Variants

Set variants using variant prop.

<Button>Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>

Loading

To indicate a button is loading, use the isLoading prop.

<Button isLoading>Default</Button>

Disabled

To indicate a button is disabled, use the isDisabled prop.

<Button isDisabled>Default</Button>

Size

Set sizes using size prop.

<Button size="small">Small</Button>
<Button size="normal">Normal</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

Display

To take full width of the parent element, use fullWidth prop.

<Button fullWidth size="small">Small</Button>

Custom width

Custom button width, use width prop.

<Button width={400}>Normal 400</Button>