Button

Buttons are used primarily for user interaction.

Installation

To install @igloo-ui/button in your project, you will need to run the following command using npm:

npm install @igloo-ui/button

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/button

Usage

Then to use the component in your code just import it!

import Button from '@igloo-ui/button';

<Button>Primary</Button>;

API

PropTypeDescription
childrenReactNodeThe content to display inside the button
disabledbooleanDisabled the button, the user cannot click on them
activebooleanSets the button in an active state
loadingbooleanReplaces button text with a spinner while a background action is being performed
size'small' | 'medium'Changes the size of button, giving more or less padding
appearance'primary' | 'secondary' | 'premium' | 'ghost' | 'danger' | { type: 'ghost', variant: 'danger'}Button appearance
dataTeststringAdd a data-test tag for automated tests
iconLeadingReactNodeIcon to display to the left of button content
iconTrailingReactNodeIcon to display to the right of button content
showOnlyIconOnMobilebooleanDisplay only the icon in mobile
onClick() => voidCallback when clicked
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
classNamestringAdd a specific class to the button
as'button' | 'a'Add the ability to display a link by an a tag