Common buttons

<Button
    color="primary"
    shape="round"
    size="small"
    variant="filled"
>
    Button
</Button>

Label

Show icon

Toggleable

Disabled

Button

<Button>Default button</Button>

With icon

You can include an icon in your button and it will automatically have the correct spacing, color, and size.

<Button><Icon icon="mood" /> I have an icon</Button>

Button variants

<Button variant="elevated">Elevated</Button>
<Button variant="filled">Filled</Button>
<Button variant="tonal">Tonal</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>

Button sizes

<Button size="extra-small">Extra small</Button>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<Button size="extra-large">Extra large</Button>

Button colors

While technically not part of the spec, you can change the button color to indicate different button roles to the user.
The default color is primary for every variant except tonal, where it is secondary.

<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="tertiary">Tertiary</Button>
<Button color="error">Error</Button>
<Button color="none">None</Button>

Button shapes

<Button shape="round">Round</Button>
<Button shape="square">Square</Button>

Toggle buttons

<ToggleButton>Default</ToggleButton>
<ToggleButton variant="text">Text</ToggleButton>
<ToggleButton size="medium">Medium</ToggleButton>
<ToggleButton color="tertiary">Tertiary</ToggleButton>
<ToggleButton shape="square">Square</ToggleButton>