input--submit

This component used the form/button component. The styling is therefore completely done by form/button.

Information

Folder
src/components/fsk/form/form-element/input/input--submit

Files

Schema
// src/components/fsk/form/form-element/input/input--submit/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /fsk/form/form-element/input/input--submit
additionalProperties: false
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
  icon:
    type: string
    format: html
  modifiers:
    type: array
    items:
      type: string
required:
  - attributes
Mocks
// src/components/fsk/form/form-element/input/input--submit/mocks.yaml

$hidden: true
attributes:
  $drupal: true
  type: submit
$variants:
  - $name: Primary button
    attributes:
      value: Primary button
  - $name: Primary button with icon
    attributes:
      value: Primary button with icon
    icon: ✓
  - $name: Primary disabled button
    attributes:
      value: Primary disabled button
      disabled: true
  - $name: Primary disabled button with icon
    attributes:
      value: Primary disabled button with icon
      disabled: true
    icon: ✓
  - $name: Secondary button
    attributes:
      value: Secondary button
    modifiers:
      - secondary
  - $name: Secondary button with icon
    attributes:
      value: Secondary button with icon
    modifiers:
      - secondary
    icon: ✓
  - $name: Secondary disabled button
    attributes:
      value: Secondary disabled button
      disabled: true
    modifiers:
      - secondary
  - $name: Secondary disabled button with icon
    attributes:
      value: Secondary disabled button with icon
      disabled: true
    modifiers:
      - secondary
    icon: ✓
Template
// src/components/fsk/form/form-element/input/input--submit/input--submit.html.twig

{% include "@fsk/form/button/button.html.twig" with {
  attributes: attributes,
  disabled: attributes.disabled,
  hidden: attributes.hidden,
  icon: icon,
  label: attributes.value,
  modifiers: modifiers,
  type: attributes.type
} only %}{{ children }}

Variants

Primary button
Open
Primary button with icon
Open
Primary disabled button
Open
Primary disabled button with icon
Open
Secondary button
Open
Secondary button with icon
Open
Secondary disabled button
Open
Secondary disabled button with icon
Open