Button

Usage

When to use

• Commit a change on a view: "Save changes", "Create experience", "Add task", "Publish".
• Submit a form. Pair with loading so the same click cannot fire twice.
• Open a menu or popover from a labelled control.
• Navigate in a way that should look like an action, by setting href.

When not to use

• A low-emphasis action inside running text. Use a text link instead.
• A binary on/off setting. Use Switch.
• An action represented by an icon alone. Use Icon Button.

Web Component features

Variant

variant sets visual weight.

• primary. The one most important action on a view.
• secondary. A supporting choice next to the primary, such as "Cancel" or "Save draft".
• tertiary. A low-emphasis action inside a card, row, or toolbar, such as "Edit".

Guidance

• Give a view exactly one primary. In Tasks, only "Add task" is primary. In the package editor, "Save" is primary and "Discard" is secondary.
• Don't make every action primary to make it visible. Use secondary or tertiary to reduce emphasis.
• Name the outcome: "Create experience", "Delete booking", "Send invite". Don't use "OK", "Submit", or "Yes".
• Keep the label to one or two words. If the button needs a sentence, put the explanation in the surrounding copy.

Tone

tone sets intent. The default is accent, the Sea-blue brand tone for the main action on a screen.

• accent. The default. Use it for the action that should pull attention.
• neutral. A lower-key action that should not pull attention.
• critical. A destructive, irreversible action: delete, remove, or cancel a booking.

Guidance

• Reserve tone="critical" for destructive work.
• Don't put critical on a routine confirmation such as "Save".
• Don't rely on tone or colour alone. The label must say what happens ("Delete", not "Confirm").

Size

size sets height and padding.

• default. Standard layouts.
• small. Dense layouts: toolbars, compact filters, table rows.

Guidance

• Use default unless the surrounding layout is already dense.
• Don't mix sizes in the same row of actions.

Disabled

disabled greys the button out and blocks interaction.

• false. The default. The button can be used.
• true. The action is not available, for example a form that is not valid yet.

Guidance

• Use disabled only when the action cannot run.
• Prefer loading while a request is in flight. See Loading.

Loading

loading shows a spinner and blocks clicks while an action runs. The control stays in the page. The spinner is aria-hidden. The button sets aria-busy="true".

• false. The default.
• true. A request is in flight.

Guidance

• Set loading during a request so the same submit cannot fire twice.
• Don't switch the button to disabled for async work. A disabled control looks unavailable, not busy.

Icon

icon adds a leading Moments icon by name, rendered as a 16px <moments-icon> that inherits the label colour.

• unset. No leading icon. The icon slot can still take a custom SVG or avatar.
• a name from the icon set, such as plus.

Guidance

• Use a named icon for glyphs in the set.
• Leave icon unset and use the icon slot for a glyph that is not in the set, or for an avatar. Figma has a leading avatar (for example an assignee button). Size that avatar in the slot until first-class avatar support exists.
• Don't use Button for an icon-only control. Use Icon Button.

Dropdown

dropdown appends a downward chevron after the label. Use it for a button that opens a menu or popover: an assignee, status, or filter picker. The chevron inherits the label colour and hides during loading.

• false. The default.
• true. Show the chevron.

Guidance

• Pair dropdown with a popover or menu of choices.
• Don't use dropdown on a button that only fires one action.

Full width

full-width stretches the button to its parent. Off by default, the button sizes to its label (Figma Hug contents / Fill container).

• false. The default. The button hugs its label.
• true. A stacked form action, a mobile CTA, or a drawer footer.

Guidance

• Use full-width when the button is the only action in a narrow column.
• Don't stretch a button that sits in a row of actions.

Href

href renders an <a role="button"> instead of a <button>. Use it when navigation should look like an action. The control stays focusable and works with Enter.

• unset. A native <button>.
• a URL. A link styled as a button.

Guidance

• Set href when the click goes to another page or resource.
• Don't use href for an action that stays on the page. Use a <button> and handle the click.

Props

Slots and events