NSW Design system
NSW design system suggests using brand button as primary,
outlined button as secondary and danger button as danger/warning.
{%- call ui.util.call(show_example) -%}
{%- raw %}
{{ ui.button("Primary", style="primary") }}
{{ ui.button("Secondary", style="secondary") }}
{{ ui.button("Danger", style="danger") }}
{%- endraw %}
{%- endcall %}
The rest of recommended styles are not mapped and produce a button with
class nsw-button--STYLE, where STYLE is replaced
by the actual style value, so that you can add custom styles for these
classes.
The theme adds color parameter to the button, that can be
combined with primary and secondary styles. It accepts dark, light,
and white values. The light and white colors,
especially their outlined version produced by secondary style
are designed for the dark background and most likely will be unusable on
the light background.
{%- call ui.util.call(show_example) -%}
{%- raw %}
{{ ui.button("Primary dark", style="primary", color="dark") }}
{{ ui.button("Secondary dark", style="secondary", color="dark") }}
{{ ui.button("Primary light", style="primary", color="light") }}
{{ ui.button("Secondary light", style="secondary", color="light") }}
{{ ui.button("Primary white", style="primary", color="white") }}
{{ ui.button("Secondary white", style="secondary", color="white") }}
{%- endraw %}
{%- endcall %}
Icons can be placed before and after the text. It's recommended to wrap the
text into separate span when it's combined with icon.
{%- call ui.util.call(show_example) -%}
{%- raw %}
{% call ui.util.call(ui.button) -%}
{{ ui.icon("home") }}
Text
{%- endcall %}
{% call ui.util.call(ui.button) -%}
Text
{{ ui.icon("heart") }}
{%- endcall %}
{% call ui.util.call(ui.button) -%}
{{ ui.icon("star") }}
Text
{{ ui.icon("cog") }}
{%- endcall %}
{%- endraw %}
{%- endcall %}