@ecl/twig-component-button

ECL Button component

npm package: @ecl/twig-component-button

npm install --save @ecl/twig-component-button

Parameters

• "label" (string) (default: '')
• "variant" (string) (default: 'primary'): variant of button (can be 'primary', 'secondary', 'cta', 'ghost', 'ghost-inverted', 'tertiary')
• "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: { 
    path: '/path-to-the-icon-file', 
    type: 'ui', 
    name: 'corner-arrow', 
    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' } 
  ] 
} %}

Changelog

4.10.0

:rocket: New Feature

• #3739 feat(icons): Adding vimeo icons - FRONT-4695 (@planctus)

:bug: Bug Fix

• #3758 fix(navigation-list): fix image size on safari - FRONT-4705 (@emeryro)
• #3759 fix(icon): fix vimeo color (@emeryro)
• #3754 fix(mega-menu): Hiding in print css - FRONT-4704 (@planctus)
• #3744 fix(file download): fix link position - FRONT-4694 (@emeryro)
• #3746 fix(lists): Fixing style of links with icons - FRONT-4700 (@planctus)

:nail_care: Enhancement

• #3753 feat(website): Showing custom properties hovering on color name in website showcase - FRONT-4703 (@planctus)

:house: Internal

• #3761 chore(deps): Updates 07-01-25 (@planctus)
• #3757 chore(deps): Updates 03-01-25 (@planctus)
• #3756 chore: yarn.lock regenerated, adding esbuild resolution (@planctus)
• #3755 fix(audit): Using nanoid 3.3.8 (@planctus)
• #3752 chore(deps): Updates 17-12-24 (@planctus)
• #3747 chore(deps): Updates - 10-12-24 (@planctus)

Committers: 2

• Romain Emery (@emeryro)
• @planctus