Components

Button

Triggers a user action. The main action of a screen or form. Follows shadcn structure with the Yuno primary color.

Updated Jul 8, 2026 by Leonardo Posada

Variants

<Button>Continue</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes

<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Plus weight="light" /></Button>

With icons

<Button>Continue <ArrowRight weight="light" /></Button>
<Button variant="outline"><MagnifyingGlass weight="light" /> Search</Button>
<Button><Trash weight="light" /> Delete rule</Button>

States

<Button disabled>Disabled</Button>
<Button variant="outline" disabled>Disabled</Button>

When to use

As the primary CTA of a screen or section.
For Submit / Save / Cancel inside a form.
To trigger a Dialog or Sheet.
For row-level actions in tables (usually variant='ghost' or 'outline').

When not to use

For navigation between pages — use next/link with anchor styling.
As a long list of options — use a Select or a Menu instead.
For toggles or booleans — use Switch or Checkbox.

Usage

One Primary button per screen.
Include a Phosphor icon with the label when it adds meaning (arrow for continue, trash for delete).
For destructive actions (delete rules, lists, routes), use variant='default' (Primary) — clarity comes from the copy, not the color.
Group Cancel + Confirm together with Cancel on the left, Confirm on the right.

Don't

Don't stack multiple Primary buttons in the same view.
Don't hardcode background colors — use variants.
Don't use variant='destructive' (red) — it is not part of the Yuno Dashboard vocabulary.
Don't use variant='link' when you actually mean a real link — use next/link.
Don't make icon-only buttons without an aria-label.

Not used at Yuno

The red (destructive) button is not used in the Yuno Dashboard.

Red communicates 'alert' or 'danger', but most 'destructive' actions at Yuno — deleting a rule, list, or route — are perfectly normal operations. Coloring them red overloads the emotional weight and makes the interface feel more anxious than it should. Yuno uses the Primary button for these actions and lets the copy carry the meaning.

Not used at Yuno

Use Primary instead

For deletes and other 'destructive' flows, use the Primary button inside a Dialog. Clarity comes from the copy ('Delete rule?'), not from the color.

<Dialog>
  <DialogTrigger asChild>
    <Button variant="ghost" size="sm">
      <Trash weight="light" /> Delete rule
    </Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete rule?</DialogTitle>
      <DialogDescription>
        Transactions matching this rule will stop being evaluated.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Delete rule</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>