Button

Starts an action, from saving a form to deleting a site.

Refined portWildButton.vueButtons/ButtonWBtn

Try it

Hover it, press it and tab to it. Turn on Loading to see the busy state.

Variant

Size

Shape

Disabled

<WildButton
  variant="primary"
  size="md"
  shape="rounded"
>
  Save changes
</WildButton>

When to use

Use a button to start an action: save, send, export, delete.
Use one primary button per view, for the action that moves the work forward.
Use destructive for actions that delete or can’t be undone, and confirm them with a confirm dialog.

Don’t use it

To go to another page. Use a text link.
For an action shown as an icon alone. Use Icon button.

Variants

Primary, secondary and borders set emphasis. Destructive, success and warning carry meaning, so use them only when the action does.

primary

secondary

borders

destructive

success

warning

<WildButton variant="primary">Save changes</WildButton>
<WildButton variant="secondary">Cancel</WildButton>
<WildButton variant="borders">Export</WildButton>

Sizes

Five heights, from 24 to 44px. The default is md, at 40px.

2xs · 24

xs · 32

sm · 36

md · 40

lg · 44

<WildButton size="2xs">Upload</WildButton>
<WildButton size="sm">Upload</WildButton>
<WildButton size="lg">Upload</WildButton>

Use 2xs only for actions inside dense table rows, where a taller button would break the row height.

States

Rest, hover, pressed, keyboard focus and disabled, for every variant. Disabled is one flat grey on all six, so it never reads as a choice of colour.

rest

hover

active

focus

disabled

primary

secondary

borders

destructive

success

warning

Keyboard focus is a ring outside the button, so it shows on every fill. Borders keeps its edge when disabled.

processing

success

error

selected

<WildButton loading>Saving</WildButton>
<WildButton processing>Working</WildButton>
<WildButton success>Saved</WildButton>
<WildButton error>Failed</WildButton>

Use loading while the click is being handled. Use processing when the work carries on and its progress shows elsewhere.

Content

Start with a verb: Save, Export, Invite.
Name the object when the verb alone is ambiguous: Delete site, Send order.
Use sentence case, and keep it to one to three words.

Accessibility

A button that shows only an icon needs ariaLabel. A disabled button leaves the tab order; a loading one keeps focus and announces that it’s busy.

Key	What it does
Tab	Moves focus to the button.
Enter / Space	Runs the action.

Props

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'borders' \| 'destructive' \| 'success' \| 'warning'	'primary'	Emphasis or meaning. See Variants.
size	'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg'	'md'	Height: 24, 32, 36, 40 or 44px.
shape	'rounded' \| 'pill'	'rounded'	6px corners, or fully round.
icon	string	—	Icon name, shown beside the label.
iconPosition	'left' \| 'right'	'right'	Which side of the label the icon sits.
iconOnly	boolean	false	Hides the label. Prefer Icon button.
disabled	boolean	false	Blocks the action and leaves the tab order.
loading	boolean	false	Spinner over the label; blocks repeat clicks.
processing	boolean	false	Dots after the label while work continues.
success	boolean	false	A tick once the action succeeds.
error	boolean	false	A cross once the action fails.
selected	boolean	false	Pressed look, for a button that toggles.
type	'button' \| 'submit' \| 'reset'	'button'	Native button type.
ariaLabel	string	—	Accessible name. Required with iconOnly.

Tokens

Token	Value	Where it lands
--radius-button	6px	Corners in the rounded shape.
--color-primary	#00AEEF	Primary fill.
--color-primary-hover	#0ABEFF	Primary fill on hover.
--color-primary-active	#1877F2	Primary fill when pressed, and its focus ring.
--color-error	#E12121	Destructive fill and the error state.
--global-neutral-grey-200	#F5F5F5	Disabled fill, every variant.
--global-neutral-grey-800	#ADACB0	Disabled label and icon.
--global-neutral-grey-500	#E6E6E6	Disabled border, borders variant only.
--font-weight-medium	475	Label weight.
(no token)	2px gap, 2px ring	Keyboard focus, outside the button.