Button

<Button variant="primary">Deploy</Button><Button>Cancel</Button><Button variant="ghost">Logs</Button>

Button is 32px tall by default and draws its edge with a ring, not a border — so a variant change never shifts the layout by a pixel and buttons sit flush inside a group.

primary is the inverse of the page: black on light, white on dark. There is no coloured accent anywhere in the system, which leaves hue free to mean exactly one thing — status.

Usage

import { Button } from "@heyo-sh/heyo-ui";<Button variant="primary" icon={IconPlus}>  Create worker</Button>;

Variants

<Button variant="primary">Primary</Button><Button variant="secondary">Secondary</Button><Button variant="outline">Outline</Button><Button variant="ghost">Ghost</Button><Button variant="destructive">Destructive</Button><Button variant="destructive-secondary">Delete</Button><Button variant="link">Link</Button>

destructive is a filled red button and belongs in the footer of a dialog that is about deleting. destructive-secondary is the row-level version — the one that opens that dialog.

Sizes

20, 26, 32 and 40px. base is the default and the height every other control in the library shares.

<Button size="xs">Extra small</Button><Button size="sm">Small</Button><Button size="base">Base</Button><Button size="lg">Large</Button>

Icons

icon and iconEnd accept a component, an element, or any node — heyo-ui ships no icon dependency. The control sizes the glyph; never do it yourself.

<Button variant="primary" icon={IconPlus}>Create</Button><Button iconEnd={IconChevronDown}>Environment</Button><Button variant="destructive-secondary" icon={IconTrash}>Delete</Button>

Shapes

square is an icon-only button — give it an aria-label. block fills its container, which is what a form's submit button usually wants.

<Button shape="square" icon={IconPlus} aria-label="Add" /><Button shape="square" size="sm" icon={IconGear} aria-label="Settings" /><div className="w-56"><Button shape="block" variant="primary">Block</Button></div>

Loading and disabled

loading swaps the leading icon for a spinner and blocks interaction, so the label stays put and the button keeps its width.

<Button loading>Deploying</Button><Button variant="primary" loading>Deploying</Button><Button disabled>Disabled</Button>

As a link

render swaps the element while keeping every bit of styling — the way to turn a button into an anchor or a router link.

<Button render={<a href="/docs" />}>Read the docs</Button><Button render={<Link to="/workers" />} variant="primary">Workers</Button>

ButtonGroup

Welds buttons into a single control: shared edges collapse, only the outer corners stay rounded, and the hovered or focused button floats above its neighbours so its ring is never clipped.

<ButtonGroup><Button icon={IconBold} shape="square" aria-label="Bold" /><Button icon={IconItalic} shape="square" aria-label="Italic" /><Button icon={IconUnderline} shape="square" aria-label="Underline" /></ButtonGroup><ButtonGroup><Button>Day</Button><Button>Week</Button><Button>Month</Button></ButtonGroup>

Properties

ButtonGroup

buttonVariants

The cva definition behind the component, exported for the rare case where something that is not a button has to look exactly like one.

import { buttonVariants } from "@heyo-sh/heyo-ui";<a className={buttonVariants({ variant: "outline", size: "sm" })}>Docs</a>;