Button

Import

import { Button } from "valliumui";

Usage

<Button>Button</Button>

Button as

The button can be used as different element type such as button or a. Depending on the use case, you can decide what element type the button will be. The Button component will use the button element type as the default.

You can use the as property to decide which element type the button will be. Visually they will look exactly the same.

<Card row gap="4">
    <Button>'button' element button</Button>
    <Button as="a">'a' element button</Button>
</Card>

Button variant

Use the variant property to change the visual style of the Button. Valid values are white, dark, accent.

<Card row gap="4">
    <Button variant="white">White</Button>
    <Button variant="dark">Dark</Button>
    <Button variant="accent">Accent</Button>
</Card>

Button scale

Use the scale property to change the size of the Button. Valid values are thin, small, normal, big.

<Card row items="center" gap="4">
    <Button scale="thin">Thin</Button>
    <Button scale="small">Small</Button>
    <Button scale="normal">Normal</Button>
    <Button scale="big">Big</Button>
</Card>