Button

The Button is a polymorphic interactive primitive built on top of Ark UI's ark.button. Visual treatment splits into two orthogonal props:

• variant — the shape (filled, light, outline, subtle)
• color — the palette (brand, gray, neutral, red, orange, yellow, green, teal, cyan, blue, purple, pink)

Color is delivered via CSS variables on a data-color attribute, so a single class set works for every palette and dark mode gets the right shade automatically.

import { Button } from '@42/ui-react/button';

<Button variant="filled" color="brand" onClick={() => console.log('hi')}>
  Get started
</Button>

Playground

Tweak the visual props live — controls are curated in the story file. The code panel updates as you change them.

<Component size="md">  Default</Component>

Variants

Four visual treatments. Each one reads off the same color slots (--c-solid, --c-soft, --c-text), so they all swap palettes uniformly.

<Button variant="filled">Filled</Button><Button variant="light">Light</Button><Button variant="outline">Outline</Button><Button variant="subtle">Subtle</Button>

Colors

Every variant accepts any color in the palette. Adding a new color is a CSS-only change — append a [data-color="…"] block to theme.css and a name to COLORS. Omitting color resolves to neutral via the :root cascade.

For a destructive action, use variant="filled" color="red". There is no separate destructive variant — intent is conveyed through color.

Sizes

Three sizes covering the standard density needs. For an icon-only square button, reach for ActionIcon.

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

Slots

startSlot and endSlot render before and after the children. Both are wrapped in aria-hidden so they don't pollute the accessible name. Pass a bare lucide-react icon — the button's size variant scales it automatically.

import { ArrowRight, ExternalLink, Plus } from 'lucide-react';<Button startSlot={<ExternalLink />}>Open</Button><Button endSlot={<ArrowRight />}>Continue</Button><Button  variant="outline"  color="gray"  startSlot={<Plus />}  endSlot={<Kbd size="sm">⌘N</Kbd>}>  New file</Button>

Loading

loading swaps in an inline spinner, disables pointer interaction, and sets aria-busy="true".

const [pending, startTransition] = useTransition();<Button  loading={pending}  onClick={() => startTransition(submit)}>  Save changes</Button>

While loading, any user-supplied startSlot is suppressed so the spinner can take its place without layout shift.

Disabled

Both native :disabled and Ark's data-disabled attribute are styled, so the disabled treatment lands whether the underlying element is a <button> or rendered through asChild.

<Button disabled>Disabled</Button>

Polymorphic with asChild

Render any other element while keeping the button's styling and behavior. Useful for wrapping a Next.js <Link> so you don't lose client-side navigation.

import Link from 'next/link';

<Button asChild color="brand">
  <Link href="/dashboard">Open dashboard</Link>
</Button>

Form submission

Buttons default to type="button" to prevent accidental form submission. Opt in explicitly when you want submit semantics:

<form action={createPost}>
  <Button type="submit" color="brand">
    Publish
  </Button>
</form>

API

All other props are forwarded to the underlying button (or asChild element).

Accessibility

• Focus ring is exposed only on keyboard focus (focus-visible:), so pointer interactions stay quiet. The ring tracks color.
• aria-busy and aria-disabled are set whenever the button is loading or disabled, regardless of the visual state.
• Slot contents are aria-hidden; the accessible name comes from the children. For icon-only triggers, use ActionIcon, which forces an explicit aria-label.