Button

Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.

Import

import { Button } from "@deca-ui/react"

Usage

<Button>Default</Button>

Sizes

Use the size prop to change the size of the Button. You can set the value to sm, md, or lg.

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Variants

Use the variant prop to change the visual style of the Button. You can set the value to solid, outlined, flat, or ghost.

<Button variant="solid">Solid</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="flat">Flat</Button>
<Button variant="ghost">Ghost</Button>

Colors

Use the color prop to change the color of the Button. You can set the value to primary, secondary, success, warning or error.

<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>
<Button color="error">Error</Button>

Pill

Use the pill prop to have a completely rounded Button.

<Button color="primary" pill>Primary</Button>
<Button color="secondary" pill>Secondary</Button>
<Button color="success" pill>Success</Button>
<Button color="warning" pill>Warning</Button>
<Button color="error" pill>Error</Button>

Disabled State

Use the disabled prop to disable the Button.

<Button disabled>Default</Button>

Made by Heril Saha