Buttons allow users to perform an action.
View source codeThe Button comes with three main visual styles: primary, secondary (default), and tertiary.
Use the primary Button for the main action in a page.
<>
<Button variant="primaryBrand" text="PrimaryBrand" />
<Button variant="primaryInfo" text="PrimaryInfo" />
<Button variant="primarySuccess" text="PrimarySuccess" />
<Button variant="primaryWarning" text="PrimaryWarning" />
<Button variant="primaryAlert" text="PrimaryAlert" />
</>
Use the secondary Button by default.
<>
<Button variant="secondaryBrand" text="SecondaryBrand" />
<Button variant="secondaryNeutral" text="SecondaryNeutral" />
<Button variant="secondaryInfo" text="SecondaryInfo" />
<Button variant="secondarySuccess" text="SecondarySuccess" />
<Button variant="secondaryWarning" text="SecondaryWarning" />
<Button variant="secondaryAlert" text="SecondaryAlert" />
</>
Use the tertiary Button to display an optional action or an event trigger.
<>
<Button variant="tertiaryBrand" text="TertiaryBrand" />
<Button variant="tertiaryNeutral" text="TertiaryNeutral" />
<Button variant="tertiaryInfo" text="TertiaryInfo" />
<Button variant="tertiarySuccess" text="TertiarySuccess" />
<Button variant="tertiaryWarning" text="TertiaryWarning" />
<Button variant="tertiaryAlert" text="TertiaryAlert" />
</>
Use the fit props to control the size of the Button.
<>
<Button fit="content" text="Content fit" />
<Button fit="parent" text="Parent fit" />
</>
You can attach an Icon to the Button using iconName prop.
Use the iconPosition prop to set the position of the button, either left (default) or right
<>
<Button iconName="chevron-left" text="Go back" />
<Button iconName="chevron-right" iconPosition="right" text="Continue" />
</>
There are two ways to set the Button's state as loading:
isLoading proponClick function<>
<Button isLoading {...otherProps} />
<Button
onClick={async (event) => {
await submitForm(event);
}}
{...otherProps}
/>
</>