Button

Buttons trigger an action or event: submitting a form, opening a dialog, or confirming a choice. Use them for in-page actions, not for navigation between pages.

Preview

Installation

npx shadcn@latest add @cubby-ui/button

Usage


import { Button } from "@/components/ui/cubby-ui/button"


<Button />

Examples

Variants

Use variant to change the button's visual weight and color.

Variant	Description
`primary`	The default, highest-emphasis action.
`primary-soft`	A tinted primary for a lower-emphasis branded action.
`neutral`	A solid neutral action with no brand color.
`secondary`	The standard lower-emphasis action.
`outline`	A bordered action for secondary actions.
`ghost`	A borderless action for toolbars and dense UI.
`link`	Renders as inline text, like a link.
`destructive`	A destructive action such as delete.
`destructive-soft`	A tinted destructive for a lower-emphasis warning.

Sizes

Use size to set the button's height and padding.

With Icons

Use leftSection and rightSection to place an icon beside the label.

As Link

Use the render prop to render as a Next.js Link, and set nativeButton to false.

Accessibility

Label icon-only buttons

An icon-only button has no text for a screen reader to announce. Give it an aria-label describing the action.


<Button size="icon" aria-label="Delete item">
  <TrashIcon />
</Button>

Loading state

The loading prop disables the button but keeps it focusable (focusableWhenDisabled), so keyboard users don't lose their place while an action is in flight.

API Reference

The Button component is built on top of Base UI's Button. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Button documentation.

Props

Clickable element that triggers actions. Wraps Base UI's Button.

Prop

Type

Default

Button

On this page