Components

Button

Curation ships three buttons on purpose. The inline Button is the shadcn primitive on MyList's tokens, sized for actions in flow. ToolbarButton is the header controls' box with a label in it, for the actions in a page's top band. BaseButton is the legacy app's 3.13rem full-width form pill. The last two are their own components so shadcn add button can never overwrite them.

Inline

The default variant is a solid --brand-fill plate with --brand-foreground on it — black on light, white on dark, as mobile's primary action is. Focus is the ring pair: focus-visible:ring-[3px] ring-ring/50 on the brand-ink ring token.

import { Button } from "@/components/ui/button";

<Button>Publish</Button>

Variants

Six variants. secondary and ghost are ink tints, so they read on either theme; link is text-brand-ink with an underline on hover.

<Button variant="default" />
<Button variant="secondary" />
<Button variant="outline" />
<Button variant="ghost" />
<Button variant="destructive" />
<Button variant="link" />

Sizes

Four text sizes and four square icon sizes. An SVG child is sized automatically unless it carries its own size-* class.

<Button size="xs" />  <Button size="sm" />  <Button />  <Button size="lg" />
<Button size="icon" aria-label="Add"><PlusIcon /></Button>

The actions in a page's top band — Save and Publish on the list editor, New list on the shelf. They sit beside the sort menu, the segmented filter and the view toggle, so they take those controls' box: 2.25rem tall, rounded-md like every header control, a 0.81rem semibold label, no border and no shadow. secondary is the sort menu's own ink/[0.04] tint; primary is the same box on the brand plate. One primary per band.

Disabled swaps the plate rather than fading it — mobile's rule. Both variants fall to the tint with an ink-quiet label, which reads as "not now" where a fade would drag the label below AA.

Icon-only actions in the same band are ghost Buttons at size="icon", rounded-lg, in text-ink-tertiary: a plate would rank them beside the labelled actions.

import { ToolbarButton } from "@/components/base/toolbar-button";

<ToolbarButton variant="secondary">Save</ToolbarButton>
<ToolbarButton>Publish</ToolbarButton>
<ToolbarButton><PlusIcon /> New list</ToolbarButton>

Form

BaseButton is the ported BaseButton.vue: full width, 3.13rem tall, rounded-lg (legacy's 1rem, snapped to the Radius ladder), and three variants. secondary is the outlined gradient plate; danger is the destructive fill. It closes login forms, editors and confirm sheets — anywhere the button is the form's last row rather than an action in flow.

import { BaseButton } from "@/components/base/base-button";

<BaseButton>Continue</BaseButton>
<BaseButton variant="secondary">Not now</BaseButton>
<BaseButton variant="danger">Delete account</BaseButton>