Button

A flexible button component with variants, sizes, loading and disabled states.

Variants

Sizes

States

Icon-only

For buttons whose content is a single icon (glyph, <svg>, etc.) with no visible label, pass iconOnly and provide an aria-label for accessibility.

Label colour on raised surfaces

A ghost or outlined (secondary) button draws its label in the primary role, which measures 4.02:1 on the-behive's Dark surface-container-high (a Modal or dialog panel), under the 4.5:1 small-text rule. The default tokens give 8.43:1 there, so only brands whose primary is darker are affected. The label reads the --button-label-color custom property (default primary), so a surface sets it on its own class instead of selecting into Button's classes, the same way Card reads --card-border:

1.my-dialog-actions {
2  --button-label-color: var(--md-sys-color-secondary);
3}

With the-behive's tokens, secondary on surface-container-high measures 12.87:1 in Dark and 5.40:1 in Light. The ghost and secondary variants read the property; primary and danger ignore it (their label is on-primary / on-error on a filled container). ConfirmDialog sets it for its Cancel button.

Inside a Modal or Drawer: their content portals to body, so a property set on a wrapper around <Modal> never reaches the buttons. Set it through the component's className (it lands on the dialog content inside the portal) or on a class inside the body:

1.my-modal {
2  --button-label-color: var(--md-sys-color-secondary);
3}