Action

Button

Triggers an action, such as submitting a form or opening a dialog.

Press a button

How to recognize it

A short label (sometimes with an icon) inside a clickable area, usually with a background or border. The most important action is often filled with the accent color.

Variations

Primary: Filled with the accent color. Used for the main action of a screen.
Secondary: Outlined or lightly filled. Used next to a primary button for alternative actions.
Ghost: Text only, with no border or background. Used for low-emphasis actions.

Behavior

Click or tap runs the action once.
Shows a hover style under a mouse pointer and a visible focus ring when reached by keyboard.
Navigating to another page is the job of a link, not a button.

Keyboard

Key	Action
`Tab`	Moves focus to the button.
`Enter`	Activates the button.
`Space`	Activates the button.

Usage notes

Use one primary (filled) button per screen, and show priority by shape (filled, outline, text) as well as color.
Make the target at least 44 × 44 CSS px.
Avoid disabled buttons. If one is unavoidable, explain nearby what is needed to enable it.

Link: A button runs an action on the current page; a link moves to another page or place.
Toggle button: A toggle button keeps an on or off state; a button runs its action once per press.
Split button: A split button adds a menu of related actions beside the main button.
File upload: A button runs an action; a file upload’s button opens a file picker and keeps the chosen files as a form value.

Sources

Open UI: Button (Last checked: 2026-10-20)
WAI-ARIA APG: Button Pattern (Last checked: 2026-10-20)
デジタル庁デザインシステムウェブサイト「ボタン」をもとに作成 (Last checked: 2026-10-20)

Demo