button (raw)

<button>: {{> @x-button--tag tag="button" label="default" }}

<a>: {{> @x-button--tag tag="a" label="default" }}

button--type

<button>: {{> @x-button--tag tag="button" modifier="x-button--type" label="default" }}

<a>: {{> @x-button--tag tag="a" modifier="x-button--type" label="default" }}

button--type-primary

<button>: {{#each typeStates as | state |}}{{> @x-button--tag tag="button" modifier="x-button--type-primary" extraClass=state.extraClass label=state.label disabled=state.disabled }}{{/each}}

<a>: {{#each typeStates as | state |}}{{> @x-button--tag tag="a" modifier="x-button--type-primary" extraClass=state.extraClass label=state.label disabled=state.disabled }}{{/each}}

button--type-secondary

<button>: {{#each typeStates as | state |}}{{> @x-button--tag tag="button" modifier="x-button--type-secondary" extraClass=state.extraClass label=state.label disabled=state.disabled }}{{/each}}

<a>: {{#each typeStates as | state |}}{{> @x-button--tag tag="a" modifier="x-button--type-secondary" extraClass=state.extraClass label=state.label disabled=state.disabled }}{{/each}}

button--type-tertiary

<button>: {{#each typeStates as | state |}}{{> @x-button--tag tag="button" modifier="x-button--type-tertiary" extraClass=state.extraClass label=state.label disabled=state.disabled }}{{/each}}

<a>: {{#each typeStates as | state |}}{{> @x-button--tag tag="a" modifier="x-button--type-tertiary" extraClass=state.extraClass label=state.label disabled=state.disabled }}{{/each}}

button--is-active

<button>: {{#each typeStates as | state |}}{{> @x-button--tag tag="button" modifier="x-button--is-active" extraClass=state.extraClass label=state.label disabled=state.disabled }}{{/each}}

<a>: {{#each typeStates as | state |}}{{> @x-button--tag tag="a" modifier="x-button--is-active" extraClass=state.extraClass label=state.label disabled=state.disabled }}{{/each}}

button--as-link

<button>: {{#each linkStates as | state |}}{{> @x-button--tag tag="button" modifier="x-button--as-link" extraClass=state.extraClass label=state.label }}{{/each}}

<a>: {{#each linkStates as | state |}}{{> @x-button--tag tag="a" modifier="x-button--as-link" extraClass=state.extraClass label=state.label }}{{/each}}

button--size-…

<button>: {{> @x-button--tag tag="button" modifier="x-button--type-secondary" extraClass="x-button--size-small" label="small" }}

<a>: {{> @x-button--tag tag="a" modifier="x-button--type-secondary" extraClass="x-button--size-small" label="small" }}

button--width-…

<button>: {{#each widths as | state |}}{{> @x-button--tag tag="button" modifier="x-button--type-secondary" extraClass=state.extraClass label=state.label }}{{/each}}

<a>: {{#each widths as | state |}}{{> @x-button--tag tag="a" modifier="x-button--type-secondary" extraClass=state.extraClass label=state.label }}{{/each}}