Button

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-button

Example Usage

<Button>Button</Button>

Colors

<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="accent">Accent</Button>
<Button color="muted">Muted</Button>
<Button color="danger">Danger</Button>

Variants

Filled

There are four colors available for the filled variant primary, accent, muted and danger.

<Button variant="filled" color="primary">Primary</Button>
<Button variant="filled" color="secondary">Secondary</Button>
<Button variant="filled" color="accent">Accent</Button>
<Button variant="filled" color="muted">Muted</Button>
<Button variant="filled" color="danger">Danger</Button>

Outline

There are four colors available for the outline variant primary, accent, muted and danger.

<Button variant="outlined" color="primary">Primary</Button>
<Button variant="outlined" color="secondary">Secondary</Button>
<Button variant="outlined" color="accent">Accent</Button>
<Button variant="outlined" color="muted">Muted</Button>
<Button variant="outlined" color="danger">Danger</Button>

Text

There are four colors available for the text variant primary, accent, muted and danger.

<Button variant="text" color="primary">Primary</Button>
<Button variant="text" color="secondary">Secondary</Button>
<Button variant="text" color="accent">Accent</Button>
<Button variant="text" color="muted">Muted</Button>
<Button variant="text" color="danger">Danger</Button>

Radius

<Button radius="sm">Button</Button>
<Button radius="md">Button</Button>
<Button radius="lg">Button</Button>
<Button radius="full">Button</Button>

Sizes

<Button size="sm">Button</Button>
<Button size="md">Button</Button>
<Button size="lg">Button</Button>
<Button size="icon">B</Button>

On this page