Igloo branding

IconButton

IconButton are used primarily for actions.

Installation

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

PropTypeDescription
classNamestringAdd class names to the surrounding DOM container
iconReactNodeIcon React node to represent the value of the button
onClick(e?: SyntheticEvent<Element, Event>) => voidCallback function that will be called when the user clicks on the button
disabledbooleanTrue if the control is disabled and shows a disabled state. The user cannot click on the button
sizeSizeButton size
roundedbooleanTrue for rounded corners
dataTeststringAdd a data-test tag for automated tests
childrenReactNodeThe content to display inside the button
activebooleanSets the button in an active state
loadingbooleanReplaces button text with a spinner while a background action is being performed
appearanceAppearanceButton appearance
iconLeadingReactNodeIcon to display to the left of button content
iconTrailingReactNodeIcon to display to the right of button content
showOnlyIconOnMobilebooleanDisplay only the icon in mobile
type"button" | "reset" | "submit"Optional prop to specify the type of the Button
intercomTargetstringAdd a data-intercom-target with unique id to link a component to a Product Tour step
resetSizeOnMobilebooleanReturn to the default size on mobile