Quick nav

Button

Buttons are used primarily for user interaction.

Version 0.8.5

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

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

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

<Button>Primary</Button>;

Prop	Type	Description
`children`	ReactNode	The content to display inside the button
`disabled`	boolean	Disabled the button, the user cannot click on them
`active`	boolean	Sets the button in an active state
`loading`	boolean	Replaces 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: 'secondary'} \| { type: 'ghost', variant: 'danger'}	Button appearance
`dataTest`	string	Add a data-test tag for automated tests
`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
`onClick`	() => void	Callback when clicked
`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
`className`	string	Add a specific class to the button
`as`	'button' \| 'a'	Add the ability to display a link by an a tag