button

// src/components/elements/button/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/button
additionalProperties: false
required:
  - label
properties:
  attributes:
    type: object
  classes:
    type: array
  disabled:
    type: boolean
  hidden:
    type: boolean
  icon:
    type: string
    format: html
  icon_only:
    type: boolean
  label:
    type: string
  modifiers:
    type: array
  target:
    type: string
    enum:
      - _self
      - _blank
      - _parent
      - _top
  type:
    type: string
    enum:
      - button
      - reset
      - submit
  url:
    type: string
    format: uri-reference

// src/components/elements/button/mocks.yaml

$variants:
  - $name: Primary button
    label: Primary button
  - $name: Primary link
    label: Primary link
    url: url
  - $name: Primary button with icon
    label: Primary button with icon
    icon: search
  - $name: Primary link with icon
    label: Primary link with icon
    url: url
    icon: search
  - $name: Primary disabled button
    label: Primary disabled button
    disabled: true
  - $name: Primary disabled button with icon
    label: Primary disabled button with icon
    disabled: true
    icon: search
  - $name: Secondary button
    label: Secondary button
    modifiers:
      - secondary
  - $name: Secondary link
    label: Secondary link
    modifiers:
      - secondary
    url: url
  - $name: Secondary button with icon
    label: Secondary button with icon
    modifiers:
      - secondary
    icon: search
  - $name: Secondary link with icon
    label: Secondary link with icon
    modifiers:
      - secondary
    url: url
    icon: search
  - $name: Secondary disabled button
    label: Secondary disabled button
    modifiers:
      - secondary
    disabled: true
  - $name: Secondary disabled button with icon
    label: Secondary disabled button with icon
    modifiers:
      - secondary
    disabled: true
    icon: search
  - $name: Primary icon button
    label: Primary icon button
    icon: search
    icon_only: true
  - $name: Primary icon link
    label: Primary icon link
    url: url
    icon: search
    icon_only: true
  - $name: Primary disabled icon button
    label: Primary disabled icon button
    disabled: true
    icon: search
    icon_only: true
  - $name: Secondary icon button
    label: Secondary icon button
    modifiers:
      - secondary
    icon: search
    icon_only: true
  - $name: Secondary icon link
    label: Secondary icon link
    modifiers:
      - secondary
    url: url
    icon: search
    icon_only: true
  - $name: Secondary disabled icon button
    label: Secondary disabled icon button
    modifiers:
      - secondary
    disabled: true
    icon: search
    icon_only: true

// src/components/elements/button/button.twig

{% set tag = url ? "a" : "button" %}
<{{ tag }}
	{{ attributes }}
	class="
		Button
		{% if icon_only %}Button--iconOnly{% endif %}
		{% for modifier in modifiers %} Button--{{ modifier }}{% endfor %}
		{{ classes|join(" ") }}
	"
	{% if tag == "button" %}
		type="{{ type|default("button") }}"
		{% if disabled %} disabled{% endif %}
	{% else %}
		href="{{ url }}"
		{% if target %}target="{{ target }}"{% endif %}
	{% endif %}
	{% if hidden %}hidden{% endif %}
>
	{% if icon and icon|trim|length > 0 %}
		<span class="Button-icon">
			{% include "@elements/icon/icon.twig" with {
				name: icon,
			} only %}
		</span>
	{% endif %}
	<span class="Button-label{% if icon_only %} u-hiddenVisually{% endif %}">
		{{ label|raw }}
	</span>
</{{ tag }}>