Keyboard focus

A button can be navigated using a keyboard. The keyboard focus state takes the button's visual hover state and adds a blue ring to the button in focus.

Tooltip when the label is hidden

When the button label is hidden, a tooltip is shown on hover that displays the label text and, if appropriate, a keyboard shortcut.

Flexible width

The width of a button automatically adjusts to fit the label text. The padding on each side of the button is equal to half its height.

Minimum width

Buttons have a minimum width of 2.25× the height of the button. This ensures that small buttons retain an identifiable shape.

Text overflow

When the button text is too long for the horizontal space available, it wraps to form another line.

Cursor style

Buttons use the default arrow cursor for all states, including hover and down. The only exception occurs on the web; if the button is using the href property it will display the pointer cursor instead.

Delay before pending state

Some progress can be very quick. In order to avoid showing a progress circle for a fraction of a second, which results in an unpleasant flickering, there is a delay of 1 second before the pending state appears. During this delay, the button continues to visually respond to interactive events (e.g., hover), but additional clicks do not result in repeated submissions.