Button

When to use it

• For an action: follow, save, subscribe, submit.
• One primary button in a group. The primary says what the page wants you to do.

• Do not use a button for navigation. If it goes somewhere, it is a link.
• Do not add a third variant. If two are not enough, the page is asking for too much.

<button class="p234-btn" type="button">Follow this topic</button>
<button class="p234-btn p234-btn--secondary" type="button">Save</button>

Primary

Brand green with on-brand text, checked at 4.5:1. One per group.

Secondary

Transparent with a rule-strong border, which meets the 3:1 non-text ratio so the control is visible to someone who cannot pick out a low-contrast outline.

Size and touch

Padding is set so the control clears a 44px touch target at the default type size. Most readers are on a phone; a control that needs a careful tap is a control that gets missed.

Focus

Buttons inherit the shared focus ring. Tab to the examples above to see it, and switch themes to see it in both. See Focus.

Motion

Background transitions on duration-fast, and the transition is removed entirely under prefers-reduced-motion.