Push button

A button gives thes user a way to trigger an immediate action. The colors used for the bakground and text of buttons have been vetted to meet a minimum color contrast ratio of 4.5:1 for accesibility purposes.

Default

Primary Secondary Button link
{{#markdown}} ```xml
Primary Secondary Button link
``` {{/markdown}}
{{#markdown}} {{> button-guidance.md}} {{/markdown}}

Alt

Primary Secondary Button link

On solid color

Primary Secondary Button link

On light image

Primary Secondary Button link

On dark image

Primary Secondary Button link
{{#markdown}} ```xml
Primary Secondary Button link
``` {{/markdown}}
{{#markdown}} {{> button-on-background-guidance.md}} {{/markdown}}

Toggle Button

Default

Alt

On solid color

On light image

On dark image

{{#markdown}} ```xml
``` {{/markdown}}
{{#markdown}} {{> toggle-button-guidance.md}} {{/markdown}}

Checkbox Toggle Button

Default

Alt

On solid color

On light image

On dark image

{{#markdown}} ```xml
``` {{/markdown}}
{{#markdown}} {{> checkbox-toggle-button-guidance.md}} {{/markdown}}

Radio Toggle Buttons

Default

Alt

On Solid Color

On light image

On Dark Image

{{#markdown}} ```xml
``` {{/markdown}}
{{#markdown}} {{> radio-toggle-button-guidance.md}} {{/markdown}}