⇠ Back to the GUI source list

Testing buttons v4.0.0 WBC

Buttons


Button tags

Button styling can be applied to <button>, <a> or <input> elements if necessary. Nb. When using button classes on <a> elements that trigger in-page functionality these links must be given a role="button" attribute.

Link

Soft buttons


Disabled state

Button element

Anchor element

Primary Hero Neutral Faint Link Primary Soft Hero Soft Neutral Soft Faint Soft


Block buttons


Responsive block buttons

This breakpoint and up

Block for MD or wider

This breakpoint only

Block for XS only


Sizes

Primary

Primary Soft Extra large Primary Soft Large Primary Soft Default Primary Soft Small

Hero

Hero Soft Extra large Hero Soft Large Hero Soft Default Hero Soft Small

Neutral

Neutral Soft Extra large Neutral Soft Large Neutral Soft Default Neutral Soft Small

Faint

Faint Soft Extra large Faint Soft Large Faint Soft Default Faint Soft Small

Link

Link (trim)

Trimmed horizontal padding


Responsive button sizing

This breakpoint and up

Default button, but Small for SM or wider

Large button, but Small for MD or wider

Small button, but Large for MD or wider

Default button, but Extra large for MD only (without using `.btn-xlarge-md-only`)

This breakpoint only

Default button, but Small for XS only

Extra large button, but Small for MD only

Default button, but Extra large for MD only


Buttons with icons (direct embedding method)

Icon only — no text

Icon right (recommended)

Icons on the right are recommended for buttons.

Icon left

Block buttons — icon right (recommended)

Left icons are possible, but not recommended.


Buttons with icons (background image method)

Icon only — no text

Icon right (recommended)

Icons on the right are recommended for buttons.

Icon left

Block buttons — icon right (recommended)

Left icons are possible, but not recommended.


Button groups

Default

Button groups with icons

Button groups with leading line

Do you want daily email updates?
Do you want daily email updates?

Button group block


Dropdown buttons

Default

Dropdown button icon left (recommended)

Icons on the left are recommended for dropdown buttons.

Dropdown button icon right

Dropdown button block

Dropdown button block (icon left — recommended)

Icons on the left are recommended for dropdown buttons.

Dropdown button block (icon right)


Dropdown menus

Dropdown menu sizes

Dropdown menu with checkboxes

Dropdown menu with radios

Dropdown menu with switches

Dropdown menu with button groups