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
  form:
    type: string
  hidden:
    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
  large:
    type: boolean
  iframe_id:
    type: string
  icon:
    $ref: /elements/icon

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

label: Button label
$variants:
  - $name: Primary button
  - $name: Primary button with icon
    icon:
      name: email
  - $name: Primary button large
    large: true
  - $name: Primary button large with icon
    large: true
    icon:
      name: email
  - $name: Primary link
    url: url
  - $name: Primary disabled button
    disabled: true
  - $name: Primary disabled button with icon
    disabled: true
    icon:
      name: email
  - $name: Secondary button
    modifiers:
      - secondary
  - $name: Secondary button with icon
    modifiers:
      - secondary
    icon:
      name: email
  - $name: Secondary button large
    large: true
    modifiers:
      - secondary
  - $name: Secondary button large with icon
    large: true
    modifiers:
      - secondary
    icon:
      name: email
  - $name: Secondary link
    modifiers:
      - secondary
    url: url
  - $name: Secondary disabled button
    modifiers:
      - secondary
    disabled: true
  - $name: Iframe opener
    iframe_id: application-form

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

{% set tag = url ? "a" : "button" %}

{% set extra_classes %}
	{%- if large -%}
		u-typo-TextL Button--large
	{%- else -%}
		u-typo-TextM
	{%- endif -%}
{% endset %}

<{{ tag }}
	{{ attributes }}
	class="Button {{ extra_classes }} {{ classes|join(" ") }}
		{%- for modifier in modifiers %} Button--{{ modifier }}{% endfor -%}
	"
	{% if tag == "button" %}
		type="{{ type|default("button") }}"
		{% if disabled %} disabled{% endif %}
		{% if form %} form="{{ form }}"{% endif %}
	{% else %}
		href="{{ url }}"
		{% if target %}target="{{ target }}"{% endif %}
	{% endif %}
	{% if hidden %}hidden{% endif %}
	{% if iframe_id %}data-dialog="{{ iframe_id|clean_id }}"{% endif %}
>
	{% if icon %}
		{% include "@elements/icon/icon.twig" with icon|merge({
			classes: ["Button-icon"],
			size: "medium",
		}) only %}
	{% endif %}
	<span class="Button-label">{{ label|raw }}</span>
</{{ tag }}>