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="soft">Soft 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="soft" inset="true">Soft 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="soft" 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="soft" 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="soft" variant="2">Soft Button</Button>

Sizes

md (default)

Use the size attribute to choose the size.

size="lg"

<!-- source -->
<Button family="soft" size="lg">Soft 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="soft">
	<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>
	Soft Button
</Button>

Icon after

Icon placed after the text

<!-- source -->
<Button family="soft">
	Soft 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="soft" icon="true" aria-label="Soft 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="soft" pill="true">Soft Button</Button>

Boxed

The button boxed attribute forces square corners.

Use the boxed attribute to set to boxed the button.

<!-- source -->
<Button family="soft" boxed="true">Soft 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="soft" justified="true">
	Soft Button
</Button>

Multiple lines

<!-- source -->
<Button family="soft" 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>