Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| type Variant | predefined | custom | predefined |
| state Variant | default | hover | disabled | pressed | default |
The IconButton is a singular component with different required props depending on whether a custom icon or predefined icon is used.
Icon button with predefined icon
Predefined Icons are a set of icons we have set up in this component for ease of use. They make use of our approved design system icons.
<IconButton icon="PlusIcon" accessibleName="Add Item" />
Icon button with custom icon
It should be noted that the IconButton will not apply any additional styling to custom icons. They should generally prefer to use currentColor to ensure colors are applied appropriately to the color/fill color depending on the type of custom icon provided.
<IconButton customIcon={<MyCustomIcon />} accessibleName="Accessible Name" />
import { css } from "@emotion/css";
const MyCustomIcon(){
return <svg className={MyCustomIconStyles}><path d={iconPath}></svg>
}
const MyCustomIconStyles = css({
fill: "currentColor",
});
<IconButton customIcon={<MyCustomIcon />} accessibleName="Accessible Name" />
Similar to an embedded SVG icon such as above, an image can also be used, for example:
import { css } from "@emotion/css";
const MyCustomIcon(){
return <img className={MyCustomIconStyles} src={iconSrc} alt="Custom Icon" />;
}
const MyCustomIconStyles = css({
width: "1rem",
height: "1rem"
});
<IconButton customIcon={<MyCustomIcon />} accessibleName="Accessible Name" />
Component dependencies
This component is internally dependent on the following components:
Help and support