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.
Feedback
We always want to improve the Design System and would be thrilled to get your feedback.
Please share your wisdom with us.