Button

In context

Try the variants

import { Button } from '@daytwo/components'

<Button
  fullWidth
  onPress={recordSale}
>
  Record sale
</Button>

Purpose

Button triggers an action. Its job on a DayTwo screen is to make the next step obvious for someone who may not understand the product yet and has no one beside them to ask. Emphasis is a deliberate signal: the high-emphasis primary variant means "this is the thing to do here," and there should be only one of those per screen.

Anatomy

A Button is a single tappable surface containing a centered label, with optional leading/trailing icons. It has no separate "container + text" split to get wrong — that is intentional, so it always meets the touch target and always reads as one thing.

• Tap surface — the whole control is tappable; height is never below the 48dp minimum.
• Label — a concrete verb phrase ("Record sale"), not "OK" or "Submit".
• Optional icon — paired with a label, never icon-only for a primary action.
• State — default, pressed, disabled, loading.

Variants

Four variants, ordered by emphasis. Emphasis communicates importance — use the highest emphasis for the screen's main action and step down from there.

• Primary — the one main action. Teal brand fill, white label (passes contrast in a bright market stall).
• Secondary — a supporting action that's still important. Tinted fill, brand-colored label.
• Tertiary — low-emphasis or dismissive ("Not now"). No fill, so it never competes with primary.
• Destructive — irreversible or data-losing actions. Red, and always paired with a confirmation step.

Sizes

Every size meets the 48dp minimum touch target — sm is smaller in padding and type, never in tappability.

Code

import { Button } from '@daytwo/components'

// The primary action on a capture screen
<Button fullWidth onPress={recordSale}>
Record sale
</Button>

When to use

• The screen has one clear action the user is meant to take — make it primary, fullWidth.
• A supporting action sits alongside the main one (e.g. "See advice") — make it secondary.
• You need a quiet, low-stakes way out ("Not now", "Skip") — make it tertiary.

When NOT to use

• For navigation between screens or tabs. That's a link or a tab, not a Button — a Button implies "something happens here," and mislabeling erodes the trust that an action did what it said.
• For more than one primary action on a screen. Two primaries means no primary; the user loses the one obvious next step.
• As an icon-only control for an important action. Low-literacy and first-time users rely on the word. Pair the icon with a label.
• To toggle a setting. Use a switch — a Button doesn't communicate on/off state.

The correct scenario

A first-time shop owner finishes entering a cash sale. The screen shows one primary, full-width Button — Record sale — and a quiet tertiary Cancel. There is exactly one obvious thing to do, it's large enough to hit without aiming, and the word says precisely what will happen.

Anti-patterns

Edge cases

Tokens used

Button reads only from semantic tokens — change a token and every Button updates in the app and on this page at once.