Skip to content
Skip design navigation
Etesie Alpha
Loading account
Components · Button

Button

Actions across five emphasis styles, five sizes, two shapes, and an optional toggle.

Anatomy

  • 1 .button-root Interactive action surface.
  • 2 .button-icon Optional leading or trailing icon.

Variants

  • Action Runs once, then returns to rest.
  • Toggle Stays selected until pressed again.

Emphasis

  • Text
  • Outlined
  • Elevated
  • Tonal
  • Filled
  • Error Etesie extension. Material names five button color styles and this is not one of them; the spec permits other color roles where the container and content reach 3:1 contrast. et— Etesie extension

Slots

What the component can hold. Every other combination — emphasis, size, shape — is a configuration; pick those in Use.

Label only
With icon

Compositions

The component in context, beside others. Open the code to see the file verbatim.

Standard button group
Connected button group
Split button

When to use

Use a button for an action that advances, confirms, or changes the current task.