Button
Buttons are used primarily for user interaction.
Version 0.10.0
StorybookInstallation
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
| Prop | Type | Default | 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 |