Button
A pressable element that triggers an action. Hover a part name or the live component to explore the anatomy.
Anatomy
root The outer <button> element. It is the interactive, focusable container
for the entire component.
Carries type="button" to prevent accidental form submission, and
receives all native button attributes like disabled, aria-label, etc.
icon An optional decorative icon rendered before the label.
Marked aria-hidden="true" so screen readers skip it — the label
carries the accessible name. The icon slot accepts any inline SVG
or icon component.
label The visible text content of the button.
Wrapped in a <span> to allow independent styling (truncation,
font-weight overrides) without affecting the root's layout. This
span is the primary source of the button's accessible name when
no explicit aria-label is set.