Skip to content

Icon Button

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
iconstring Name of Fontawesome icon to include. Can be namespaced with a style like light/bookYes-
icon_classstring Class applied to iconNo-
icon_altstring Secondary fontawesome icon to show for the button's active state if it needs oneNo-
icon_alt_classstring Class applied to alt iconNo-
labelstring 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 elementNo-
classstring 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

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: {...}
} ) }}