IconButton: React
IconButtons are specific instances of a Button, where the only content is an Icon.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Brand } from '@mediahuis/chameleon-theme-wl/icons';
import { IconButton } from '@mediahuis/chameleon-react';
export default function Example() {
return <IconButton icon={<Brand />} />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
accessibilityLabel | String | - | No | Used to set an accessible friendly label for the IconButton. |
appearance | 'default' | 'primary' | 'secondary' | 'tertiary' | 'default' | No | Controls the button's background, text, and border color. |
as | ElementType | 'button' | No | Allows rendering the IconButton with a different HTML tag or a custom component. |
circular | Boolean | - | No | Determines whether the IconButton should be displayed as circular. |
className | String | - | No | Allows extending the class names of the IconButton component. |
disabled | Boolean | - | No | Visually and functionally disables the IconButton. |
icon | SVGType | - | No | Specifies the icon rendered inside the IconButton. |
loading | Boolean | - | No | Displays a loading indicator inside the IconButton. |
onClick | Unknown | - | No | Event handler function triggered when the IconButton is clicked. |
size | 'sm' | 'lg' | 'lg' | No | Changes the button's height and width. |
icon
The icon property allows you to specify an icon to display in the button. You can choose an icon from the list of available icons provided in the Icons documentation.
as
You can use the as prop to create links that look like an IconButton. Please, don't wrap them with an a tag.
<IconButton as="a" href="#" icon={<Brand />} />