Testing buttons v4.0.2 WBG

Buttons

Primary Hero Neutral Faint Link

Button tags

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

Soft buttons

Primary Soft Hero Soft Neutral Soft Faint Soft

Disabled state

Button element

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

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 Extra large Primary Large Primary Default Primary Small

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

Hero

Hero Extra large Hero Large Hero Default Hero Small

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

Neutral

Neutral Extra large Neutral Large Neutral Default Neutral Small

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

Faint

Faint Extra large Faint Large Faint Default Faint Small

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

Link

Link Extra large Link Large Link Default Link Small

Link (trim)

Trimmed horizontal padding

Link Trim Extra large Link Trim Large Link Trim Default Link Trim Small

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.

Primary Small Primary Default Primary Large Primary Extra large

Hero Small Hero Default Hero Large Hero Extra large

Neutral Small Neutral Default Neutral Large Neutral Extra large

Faint Small Faint Default Faint Large Faint Extra large

Link Small Link Default Link Large Link Extra large

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

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

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

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

Icon left

Primary Small (left) Primary Default (left) Primary Large (left) Primary Extra large (left)

Hero Small (left) Hero Default (left) Hero Large (left) Hero Extra large (left)

Neutral Small (left) Neutral Default (left) Neutral Large (left) Neutral Extra large (left)

Faint Small (left) Faint Default (left) Faint Large (left) Faint Extra large (left)

Link Small (left) Link Default (left) Link Large (left) Link Extra large (left)

Primary Soft Small (left) Primary Soft Default (left) Primary Soft Large (left) Primary Soft Extra large (left)

Hero Soft Small (left) Hero Soft Default (left) Hero Soft Large (left) Hero Soft Extra large (left)

Neutral Soft Small (left) Neutral Soft Default (left) Neutral Soft Large (left) Neutral Soft Extra large (left)

Faint Soft Small (left) Faint Soft Default (left) Faint Soft Large (left) Faint Soft Extra large (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.

Primary Small Primary Default Primary Large Primary Extra large

Hero Small Hero Default Hero Large Hero Extra large

Neutral Small Neutral Default Neutral Large Neutral Extra large

Faint Small Faint Default Faint Large Faint Extra large

Link Small Link Default Link Large Link Extra large

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

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

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

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

Icon left

Primary Small (left) Primary Default (left) Primary Large (left) Primary Extra large (left)

Hero Small (left) Hero Default (left) Hero Large (left) Hero Extra large (left)

Neutral Small (left) Neutral Default (left) Neutral Large (left) Neutral Extra large (left)

Faint Small (left) Faint Default (left) Faint Large (left) Faint Extra large (left)

Link Small (left) Link Default (left) Link Large (left) Link Extra large (left)

Primary Soft Small (left) Primary Soft Default (left) Primary Soft Large (left) Primary Soft Extra large (left)

Hero Soft Small (left) Hero Soft Default (left) Hero Soft Large (left) Hero Soft Extra large (left)

Neutral Soft Small (left) Neutral Soft Default (left) Neutral Soft Large (left) Neutral Soft Extra large (left)

Faint Soft Small (left) Faint Soft Default (left) Faint Soft Large (left) Faint Soft Extra large (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

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