IconButton
IconButton are used primarily for actions.
Version 1.4.0
StorybookInstallation
To install @igloo-ui/icon-button in your project, you will need to run the following command using npm:
npm install @igloo-ui/icon-button
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/icon-button
Usage
Then to use the component in your code just import it!
import IconButton from '@igloo-ui/icon-button';
import Plus from '@igloo-ui/icons/dist/Plus';
<IconButton icon={<Plus size="small" />} />;
API
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Add class names to the surrounding DOM container |
icon | ReactNode | - | Icon React node to represent the value of the button |
onClick | (e?: SyntheticEvent<Element, Event>) => void | - | Callback function that will be called when the user clicks on the button |
disabled | boolean | True if the control is disabled and shows a disabled state. The user cannot click on the button | |
size | Size | Button size | |
rounded | boolean | True for rounded corners | |
dataTest | string | - | Add a data-test tag for automated tests |
children | ReactNode | - | The content to display inside the button |
active | boolean | - | Sets the button in an active state |
loading | boolean | - | Replaces button text with a spinner while a background action is being performed |
appearance | Appearance | - | Button appearance |
iconLeading | ReactNode | - | Icon to display to the left of button content |
iconTrailing | ReactNode | - | Icon to display to the right of button content |
showOnlyIconOnMobile | boolean | - | Display only the icon in mobile |
type | "button" | "reset" | "submit" | - | Optional prop to specify the type of the Button |
intercomTarget | string | - | Add a data-intercom-target with unique id to link a component to a Product Tour step |
resetSizeOnMobile | boolean | - | Return to the default size on mobile |