Primitives

Button

Five variants — primary, ink, ghost, quiet, danger. Three sizes. Pill in variant A, square in C. Always one accent CTA per screen.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

Preview

import { Button, ButtonGroup } from "@/components/br/primitives";
import { Arrow, Trash, Filter } from "@/components/br/icons";

<Button variant="primary" iconRight={<Arrow size={14} />}>
  Start a project
</Button>
<Button variant="ink">Read journal</Button>
<Button variant="ghost" icon={<Filter size={14} />}>Filter</Button>
<Button variant="quiet">Forgot password?</Button>
<Button variant="danger" icon={<Trash size={14} />}>Delete</Button>

<ButtonGroup
  value={view}
  onChange={setView}
  options={[
    { value: "list", label: "List" },
    { value: "grid", label: "Grid" },
    { value: "kanban", label: "Kanban" },
  ]}
/>

Import

import { Button, ButtonGroup } from "@/components/br/primitives";

Props

PropTypeDefaultDescription
variant"primary" | "ink" | "ghost" | "quiet" | "danger""primary"Visual style.
size"sm" | "md" | "lg""md"Height and padding.
iconReactNode—Icon rendered on the left.
iconRightReactNode—Icon rendered on the right (slides 2px on hover).
childrenReactNode—Label. If omitted, button becomes icon-only (square).

Notes

  • One primary per screen. Everything else is ink or ghost.
  • Destructive uses danger — outlined in accent, not red. The system has no red.
  • Variant A makes buttons pill-shaped automatically.