Icon Button
Table of Contents
Specifications
Properties
Property | Type | Description | Required | Default |
---|---|---|---|---|
icon | string | Name of Fontawesome icon to include. Can be namespaced with a style like light/book | Yes | - |
icon_class | string | Class applied to icon | No | - |
icon_alt | string | Secondary fontawesome icon to show for the button's active state if it needs one | No | - |
icon_alt_class | string | Class applied to alt icon | No | - |
label | string | Optional simple text label positioned underneath the icon. This should be very short. If more text detail is needed consider adding an aria-label attribute on the main element | No | - |
class | string | list of additional classes to apply to main element. | No | - |
Changelog
6.12.1 (2024-06-12)
- fix: standardize opacity values for color system v2 (c2c974b)
6.12.1 (2024-06-12)
- fix: standardize opacity values for color system v2 (c2c974b)
5.0.0 (2023-06-13)
- fix: add check for alt_icon (342343e)
1.14.0
- icon-button added
Related
Contains
Other core components embedded within this template.
Examples
Default
{{ include( 'components/icon-button.twig', { icon: "clouds-moon" } ) }}
Text Label
{{ include( 'components/icon-button.twig', { icon: "clouds-moon" label: "Weather" } ) }}
Toggle with Alt Icon
{{ include( 'components/icon-button.twig', { icon: "bars" icon_alt: "times" attrs: {...} } ) }}