Button

BUTTON

Playground

Blue ThemeOrange Theme

---

disabled

color

primarysecondaryinfo

size

smmdlg

variant

solidoutlineplain

Props

Handling Clicks

Buttons accept an `onClick` handler that is applied to the button element.

<Button
  onClick={() => {
    alert("clicked");
  }}
>
  Click me
</Button>

Variants

The Button comes with five variants: `plain`, `outline`, `soft`, `solid` (default), and `achromatic`.

<Button variant="plain">plain</Button>
<Button variant="outline">outline</Button>
<Button variant="soft">soft</Button>
<Button variant="solid">solid</Button>
<Button variant="achromatic">achromatic</Button>

Sizes

Use the `size` prop to change the size of the button.

<Button size="2xl">Button</Button>
<Button size="xl">Button</Button>
<Button size="lg">Button</Button>
<Button size="md">Button</Button>
<Button size="sm">Button</Button>
<Button size="xxs">Button</Button>

Colors

Button supports the palette included in TayTay-UI. Use the color prop to change the color.

<Button color="primary">primary</Button>
<Button color="secondary">secondary</Button>
<Button color="neutral">neutral</Button>
<Button color="danger">danger</Button>
<Button color="info">info</Button>
<Button color="success">success</Button>
<Button color="warning">warning</Button>

Links and Polymorphism

Use the `as` prop to create a hyperlink. Pass an `a` tag to the prop to change the root element.

<Button as="a">I'm an anchor element</Button>

Button with Icons and Labels

If you want to enhance the UX of your button with an icon, compose them within the `children` of the button:

<Button variant="outlined">
  <>
    <DeleteIcon />
    Delete
  </>
</Button>
<Button variant="solid">
  <>
    Send
    <SendIcon />
  </>
</Button>

Anatomy

The Button is composed of a single root `<button>` element that wraps its contents.

<button>{children}</button>

Props

The button extends the built-in button element props, and supports the following props:

Name	Type	Description
children	ReactNode	The button content.
color	Colors	The color of the component, dictated by the current theme.
disabled	boolean	Determines if button is disabled.
fullWidth	boolean	Determines if button takes full width of container.
size	xs | sm | md | lg | xl	Determines size of component. Default: `md`
variant	Variants	The variant to use.