Button

Iris styles button, input[type="submit"], input[type="reset"], input[type="button"] and anything with role="button", including links.

Colors

A color class sets --i-variant and --i-variant-inverse. The button builds its background, border, text and focus ring from them.

For a color outside the list, set the two variables yourself.

Styles

.outlined keeps only the border and text. .tint is a pale tint and .deep a deep shade, the same in both themes.

.rounded gives pill corners and .square removes them.

Sizes

The default size needs no class. .medium is larger than the default.

States

.hover, .active and .focus show a state without interaction, for previews and docs. disabled, aria-busy="true" and aria-current work as attributes. A button with aria-current keeps the hover look, for the selected item in a toolbar.

File input

The picker button of a file input is a secondary button.

Group

.group joins buttons into one control. See group for inputs and search bars.

Variables

Buttons share padding and the disabled opacity with form controls, see controls.