Button

import { Button } from '@/registry/qure/ui/button'export default function ButtonDemo() {  return <Button>Save report</Button>}

Installation

npx shadcn@latest add https://qure-ui.qure.ai/r/button.json

Usage

import { Button } from '@/components/ui/button'

<Button variant="primary" size="md">Save report</Button>

Variant

variant is emphasis, not colour. One primary per view: it is the thing you expect the person to do next, and two of them is the same as none.

import { Button } from '@/registry/qure/ui/button'export default function ButtonVariant() {  return (    <>      <Button variant="primary">Primary</Button>      <Button variant="secondary">Secondary</Button>      <Button variant="tertiary">Tertiary</Button>      <Button variant="neutral">Neutral</Button>    </>  )}

primary — the main action. Save, submit, sign.
secondary — a real action, but not the one you are steering towards. A tinted fill with a hairline, not an outline on nothing.
tertiary — low weight, sitting beside other content. Cancel usually belongs here.
neutral — dark and quiet, for toolbars and dense surfaces where brand teal would fight the imagery.

destructive, ghost and link also exist. They have no Figma counterpart and are marked as such in the stylesheet, so nobody mistakes them for design decisions.

Size

import { Button } from '@/registry/qure/ui/button'export default function ButtonSize() {  return (    <>      <Button size="xs">Extra small</Button>      <Button size="sm">Small</Button>      <Button size="md">Medium</Button>      <Button size="lg">Large</Button>    </>  )}

Size	Height	Text	Use
`xs`	24	12	Table rows and dense toolbars
`sm`	32	14	Secondary surfaces
`md`	40	16	The default
`lg`	48	16	A page whose purpose is one action

With an icon

Pass the icon as a child, on whichever side it belongs. The stylesheet sizes it to match the button, so no size prop on the icon is needed.

import { CheckIcon, DownloadIcon, PlusIcon } from 'lucide-react'import { Button } from '@/registry/qure/ui/button'export default function ButtonIcon() {  return (    <>      <Button><CheckIcon /> Sign report</Button>      <Button variant="secondary">Export <DownloadIcon /></Button>      <Button size="icon-md" aria-label="Add study"><PlusIcon /></Button>    </>  )}

For an icon with no label use an icon-* size, and give it an aria-label — a lone glyph has no text for a screen reader to announce.

Disabled

import { Button } from '@/registry/qure/ui/button'export default function ButtonDisabled() {  return (    <>      <Button disabled>Primary</Button>      <Button variant="secondary" disabled>Secondary</Button>      <Button variant="tertiary" disabled>Tertiary</Button>    </>  )}

One disabled treatment for every variant, because the design system has one disabled surface. Tertiary keeps its transparency.

Props

Everything Base UI's Button accepts, plus:

Prop

Type