Button

When to use this component

Use the button component to help users carry out an action like submitting a form, saving changes, or confirming a decision.

Write button text in sentence case, describing the action it performs. For example:

• 'Save' to confirm changes
• 'Share' to open a share menu
• 'Shop' to link to a product page

Guidelines

• Label the action, not the response: Use "Delete account" not "OK".
• One primary action per view: Extra buttons mean extra thinking.
• Avoid Reset buttons: Users click Reset by mistake and lose data.
• Cancel sparingly: On web, users rely on the Back button.
• Visual hierarchy: Primary action prominent, secondary subdued.

When not to use

Do not use Button for navigation. Instead, use <NuxtLink> for internal links and <a> for external links.

On creator storefront pages, use theme-v2-primary-button class instead. it picks up the creator's theme color.

How it works

Severities

Outlined

Sizes

Rounded

Text only

With icons

Loading

Disabled

<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Outlined" severity="secondary" outlined />
<Button label="Small" size="small" />
<Button label="Rounded" rounded />
<Button label="Save" icon="pi pi-check" />
<Button label="Saving..." loading />
<Button icon="pi pi-search" aria-label="Search" rounded outlined />

Edge cases

• Icon-only buttons must have aria-label
• Do not use !important to override styles. Instead, use pt passthrough
• On creator pages, use theme-v2-primary-button class