ECL Button component

npm package: @ecl/button

npm install --save @ecl/button

Parameters

• "label" (string) (default: '')
• "size" (string) (default: 'l'): button size
• "variant" (string) (default: 'primary'): can be 'primary', 'secondary', 'tertiary'
• "style" (string) (default: ''): can be 'highlight', 'neutral', 'inverted'. Not all styles are available for all variants
• "type" (string) (default: 'submit'): can be the same type as HTML button - 'submit', 'reset', 'button'
• "disabled" (bool) (default: false): define if button should be disabled (HTML disabled attribute)
• "hide_label" (bool) (default: false): hide button label, for screen reader only. Note: requires to have an icon defined
• "icon_position" (string, optional) (default: after): Define icon position, can be 'before' or 'after'
• "icon" (optional) (associative array) OR (array) of associate arrays - Default structure of the icon component with extra_classes as an internal key.
• "indicator" (object) (default: {}) object of type Indicator. To be displayed it should be defined and not empty (should contain at least an empty value), and only if there is an icon and no label
• "extra_classes" (optional) (string) (default: '') Extra classes (space separated)
• "extra_attributes" (optional) (array) (default: []) Extra attributes
  • "name" (string) Attribute name, eg. 'data-test'
  • "value" (string) Attribute value, eg: 'data-test-1'

Example for primary button:

{% include '@ecl/button/button.html.twig' with { 
  variant: 'primary', 
  label: 'Example button', 
  disabled: false, 
  icon: { 
    name: 'corner-right',
    family: 'phosphor', 
    size: 'xs,' 
  }, 
  extra_classes: 'my-extra-class-1 my-extra-class-2', 
  extra_attributes: [ 
    { name: 'data-test', value: 'data-test-value' }, 
    { name: 'data-test-1', value: 'data-test-value-1' } 
  ] 
} %}