Pattern library

Button

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

View full screen

Details

Key links

Source (Nunjucks)

<button class="button">{{ data.text }}</button>

Output

<button class="button">A button</button>

Docs

Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.

Variants

Button Secondary

View full screen

Details

Source

<button class="button" data-type="secondary">{{ data.text }}</button>

Output
<button class="button" data-type="secondary">A secondary button</button>