Components

Icon Button

Play around with props, edit and copy code.

Properties

IconButton

Prop name	Type	Default Value	Description
children	node
className	string

Icon

Prop name	Type	Default Value	Description
size	union	'300'	Set size of the icon
className	string		Add custom classes
color	union		Set the icon color
icon *	union		Which icon to show

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Additional information regarding accessibility of this component below.

The differences between icon and icon button is that icon button has a click response that follows the icon size, example icon-100 = 16 x16 px icon = 40 x 40 px click response. This means that icon size x 2.5 = click response size.