It's important to note that the terms "solid button" and "outline button" describe visual styles in user interface design, and should not be confused with the HTML <button> element used in web development.

Default

<!-- source -->
<Button family="solid">Solid Button</Button>

States

Button states represent the button's appearance and behavior in response to user interactions and system conditions.

Element states

default

hover

active

keyboard focus

disabled

Element states (inset)

When the button is used at the edges of the viewport or in other situations where outlines are partially hidden.

keyboard focus

Use the inset attribute to set to inset the outlines.

<!-- source -->
<Button family="solid" inset="true">Solid Button</Button>

Selected state

The selected state of a button, which is not an element state, refers to a visually distinct condition indicating that the button has been chosen or activated.

default (selected="true")

variant

family

variant and family

Use the selected and selectedFamily/selectedVariant attribute to set to controll the selected state.

<!-- where selected is a boolean -->
<Button family="solid" selected={selected} selectedVariant="2" selectedFamily="soft" aria-selected="true">Solid Button</Button>

Only use the aria-selected attribute when the contents of the button is not changed between selected states.

Button contents

Sometimes the content of the button needs to change when the state is selected.

<!-- where selected is a boolean -->
<Button family="solid" selected={selected} selectedFamily="soft" onclick={() => selected = !selected}>
	<Button.Selected>Selected Button</Button.Selected>
	<Button.Unselected>Unselected Button</Button.Unselected>
</Button>

Variants

In a multibrand environment, adopting "variant" in place of "intent" offers a more neutral and adaptable approach to characterizing various component versions, free from associations specific to each brand's identity or design.

default

inversed

error

Use the variant attribute to choose the variant.

variant="2"

<!-- source -->
<Button family="solid" variant="2">Solid Button</Button>

Sizes

md (default)

Use the size attribute to choose the size.

size="lg"

<!-- source -->
<Button family="solid" size="lg">Solid Button</Button>

Button with icon

Buttons may include an icon before or after the text label.

Icon before

Icon placed before the text

<!-- source -->
<Button family="solid">
	<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" ><path fill="currentColor" d="m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03L22 9.24Z"/></svg>
	Solid Button
</Button>

Icon after

Icon placed after the text

<!-- source -->
<Button family="solid">
	Solid Button
	<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" ><path fill="currentColor" d="m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03L22 9.24Z"/></svg>
</Button>

Icon Button

When displaying only an icon, enable the icon attribute; this will give the button a square shape.

<!-- source -->
<Button family="solid" icon="true" aria-label="Solid Button">
	<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" ><path fill="currentColor" d="m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03L22 9.24Z"/></svg>
</Button>

At the very least, the aria-label attribute should be used on an icon button to provide a textual description of its function, enhancing accessibility for users who rely on screen readers.

When the button is set to icon mode, all variants and sizes remain applicable.

md (default)

Pill

The button pill attribute forces the button into a fully rounded version.

Use the pill attribute to set to pill the button.

<!-- source -->
<Button family="solid" pill="true">Solid Button</Button>

Boxed

The button boxed attribute forces square corners.

Use the boxed attribute to set to boxed the button.

<!-- source -->
<Button family="solid" boxed="true">Solid Button</Button>

Justified

By default, a button's size is determined by its label or icon. When justified, it stretches to fill the entire width of its container.

Single line

<!-- source -->
<Button family="solid" justified="true">
	Solid Button
</Button>

Multiple lines

<!-- source -->
<Button family="solid" justified="true">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nesciunt molestias odit voluptate magnam ex aliquam vel inventore, cum enim veniam earum odio placeat iusto suscipit consequatur voluptatem dicta laudantium.
</Button>

Accessibility (ARIA)

Buttons support several ARIA attributes to communicate state and purpose to assistive technologies.

`aria-label`

Use when the button has no visible text (icon-only), or when the visible label is not descriptive enough on its own.

<!-- source -->
<Button family="solid" icon="true" aria-label="Add to favourites">
	<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03L22 9.24Z"/></svg>
</Button>

`aria-pressed`

Use on toggle buttons to indicate whether the button is currently active. Value should reflect the current boolean state.

<!-- where pressed is a boolean -->
<Button family="solid" aria-pressed={true}>Mute</Button>
<Button family="solid" aria-pressed={false}>Mute</Button>

`aria-expanded`

Use on buttons that show or hide another element (e.g. a dropdown or accordion). Reflects whether the controlled element is currently visible.

<!-- where expanded is a boolean -->
<Button family="solid" aria-expanded={true} aria-controls="panel-id">Show details</Button>
<Button family="solid" aria-expanded={false} aria-controls="panel-id">Show details</Button>

`aria-controls`

References the id of the element the button controls. Used together with aria-expanded or aria-haspopup.

<!-- source -->
<Button family="solid" aria-expanded={false} aria-controls="menu-id">Open menu</Button>

`aria-haspopup`

Indicates the button opens a popup element such as a menu, listbox or dialog.

<!-- source -->
<Button family="solid" aria-haspopup="menu" aria-expanded={false} aria-controls="menu-id">Options</Button>

`aria-disabled`

Marks a button as semantically disabled while keeping it focusable. Use instead of the disabled attribute when the button should remain reachable by keyboard (e.g. to show a tooltip explaining why it is unavailable).

<!-- source -->
<Button family="solid" aria-disabled={true}>Submit</Button>

`aria-describedby`

References the id of an element that provides additional descriptive context for the button.

This will permanently remove the item.

<!-- source -->
<p id="delete-desc">This will permanently remove the item.</p>
<Button family="solid" aria-describedby="delete-desc">Delete</Button>