button

Information

Folder
src/components/elements/button

Files

Schema
Mocks
Template
// src/components/elements/button/button.html.twig

{% set modifiers = [] %}
{% if mutation %}
  {% set modifiers = modifiers|merge([mutation]) %}
{% endif %}
{% if tenant %}
  {% set modifiers = modifiers|merge([tenant]) %}
{% endif %}
{% if reduced %}
  {% set modifiers = modifiers|merge(["reduced"]) %}
{% endif %}
{% if icon_left %}
  {% set modifiers = modifiers|merge(["iconLeft"]) %}
{% endif %}

{% set icon_html %}
{% if icon %}{% include "@elements/icon/icon.html.twig" with {name: icon} only %}{% endif %}
{% endset %}

{% include "@fsk/form/button/button.html.twig" with {
  attributes: attributes,
  icon: icon_html,
  classes: [class],
  disabled: disabled,
  hidden: hidden,
  label: label,
  modifiers: modifiers,
  target: target,
  type: type,
  url: url,
} only %}

Variants

Primary Button
Open

Primary Button mock data

Raw
Resolved
Primary Button Disabled
Open

Primary Button Disabled mock data

Raw
Resolved
Primary Button with Icon right
Open

Primary Button with Icon right mock data

Raw
Resolved
Primary Button with Icon left
Open

Primary Button with Icon left mock data

Raw
Resolved
Primary Button with Icon and reduced on mobile
Open

Primary Button with Icon and reduced on mobile mock data

Raw
Resolved
Secondary Button
Open

Secondary Button mock data

Raw
Resolved
Secondary Button Disabled
Open

Secondary Button Disabled mock data

Raw
Resolved
Secondary Button with Icon Right
Open

Secondary Button with Icon Right mock data

Raw
Resolved
Secondary Button with Icon Left
Open

Secondary Button with Icon Left mock data

Raw
Resolved
Secondary Button with Icon and reduced on mobile
Open

Secondary Button with Icon and reduced on mobile mock data

Raw
Resolved
Donation Button
Open

Donation Button mock data

Raw
Resolved
Donation Button Disabled
Open

Donation Button Disabled mock data

Raw
Resolved
Donation Button with Icon right
Open

Donation Button with Icon right mock data

Raw
Resolved
Donation Button with Icon left
Open

Donation Button with Icon left mock data

Raw
Resolved
Donation Button with Icon and reduced on mobile
Open

Donation Button with Icon and reduced on mobile mock data

Raw
Resolved
Default Link
Open

Default Link mock data

Raw
Resolved
Link with Icon right
Open

Link with Icon right mock data

Raw
Resolved
Link with Icon left
Open

Link with Icon left mock data

Raw
Resolved
Link with Icon and reduced on mobile
Open

Link with Icon and reduced on mobile mock data

Raw
Resolved
Kids Primary Button
Open

Kids Primary Button mock data

Raw
Resolved
Kids Secondary Button
Open

Kids Secondary Button mock data

Raw
Resolved