Button

Buttons are used primarily for actions, such as "add", "close", "cancel" or "save". They always have a label and optionally contain one icon, before or after the label.

Example

Live Editor

<Button label="Click me!" />

Result

Loading...

Usage Rules

Do:

• Label the button to explain what it does
• Keep lables as concise as possible
• Keep button sequence consistent, for example keeping Cancel/OK in the same order product wide

Don’t:

• Use multiple Primary buttons in the same segment

Variants

Disabled

Live Editor

<>
  <Button label="Click me!" disabled />
  <Button label="Click me!" iconName="Plus" disabled />
</>

Result

Loading...

Feedback

We have 4 feeback variant: info, positive, warning and negative.

Live Editor

<>
  <Button label="Info" kind="feedback-info-primary" />
  <Button label="Positive" kind="feedback-positive-primary" />
  <Button label="Warning" kind="feedback-warning-primary" />
  <Button label="Negative" kind="feedback-negative-primary" />
</>

Result

Loading...

Every feedback variant has a primary and secondary variants.

Live Editor

<>
  <Button label="Info Primary" kind="feedback-info-primary" />
  <Button label="Info Secondary" kind="feedback-info-secondary" />
</>

Result

Loading...

Highlighted Button

We have a tertiary button variant which can be accessed through isHighlighted prop.

Live Editor

<>
  <Button
    kind="tertiary"
    label="Tertiary Highlighted"
    isHighlighted
  />
  <Button
    kind="tertiary"
    iconName="Plus"
    iconAlignment="right" 
    label="Icon on right" 
    isHighlighted
  />
  <Button
    kind="tertiary"
    label="Loading Button" 
    isHighlighted
    isLoading
  />
</>

Result

Loading...

Icon

Every button can be rendered with an icon to emphasize an action. All available icons can be found here.

The button without label is recommended to add aria-label or aria-labelledby for better accessibility.

Live Editor

<>
  <Button iconName="Check" iconAlignment="left" label="Icon before text" />
  <Button iconName="Check" iconAlignment="right" label="Icon after text" />
  <Button iconName="AIAgent" kind='primary' aria-label='Adjust Copilot' />
</>

Result

Loading...

Kind

Buttons come in four semantic variants: primary, secondary, tertiary , negative and dark.

Use the Primary Button for the main action option the user will take. Avoid using more than one Primary Button in the same segment. Remember to use buttons in their proper hierarchy of importance. Use the Floating Button for when you need the button to be floating above other elements. Floating Button has a fixed position by default and it's been overwritten in example to relative to be visible in the related section.

Live Editor

<>
  <Button kind="primary" label="Primary" />
  <Button kind="secondary" label="Secondary" />
  <Button kind="tertiary" label="Tertiary" />
  <Button kind="negative" label="Negative" />
  <Button kind="dark" label="Dark" />
  <Button kind="floating" label="Floating" style={{ position: 'relative' }} />
</>

Result

Loading...

Loader

Every button can be rendered with a loader to emphasize loading state.

Loader supports all sizes and can be placed on left or right of the Button using iconAlignment prop.

Live Editor

<>
  <Button label="Button" isLoading />
  <Button label="Button" kind="primary" size="small" isLoading />
  <Button label="Button" kind="negative" isLoading iconAlignment="right" />
</>

Result

Loading...

Sizes

The Button component is available in three sizes: small, medium and large. Use multiple sizes sparingly to avoid visual clutter.

Live Editor

<>
  <Button size="small" label="Small" />
  <Button size="medium" label="Medium" />
  <Button size="large" label="Large" />
</>

Result

Loading...

URL Navigation

This can be done by injecting the Link component from react-router-dom to the Button component and passing the required to prop for navigating to a route.

info

The Button is not rendered here because the react-router-dom package is needed for URL naviagtion. This is just an example for how it will be used for URL naviagtion.

import { Link } from 'react-router-dom';

<>
  <Button to="/hello-world" as={Link} label="Link button" kind="primary" />
</>;

Props

Name	Type	Default
id Native HTML attribute: Link .	string	—
label The label for the button	string	—
type Native HTML attribute: Link	"button" | "submit" | "reset"	—
isHighlighted isHighlighted boolean for Highlighted tertiary button	boolean	—
size Size of the button	"small" | "medium" | "large"	—
onMouseLeave Native HTML callback: Link	MouseEventHandler<HTMLButtonElement>	—
onMouseEnter Native HTML callback: Link	MouseEventHandler<HTMLButtonElement>	—
onFocus Native HTML callback: Link	FocusEventHandler<HTMLButtonElement>	—
onClick Native HTML callback: Link	MouseEventHandler<HTMLButtonElement>	—
onBlur Native HTML callback: Link	FocusEventHandler<HTMLButtonElement>	—
onKeyDown Native HTML callback: Link	KeyboardEventHandler<HTMLButtonElement>	—
kind Kind of the button	"negative" | "primary" | "secondary" | "tertiary" | "dark" | "floating" | "feedback-info-primary" | ...	—
iconName Name of the Icon that is shown next to the label. Refer to the full list here: Link	"AddValue" | "Adjust" | "AIAgent" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown"...	—
iconAlignment Whether the icon should appear after or before the label	"left" | "right"	—
disabled Use this prop if the component should not be interactive	boolean	—
aria-pressed Optional aria-pressed prop for accessibility	AriaPressed	—
isLoading Boolean prop to add a loader to the component	boolean	—
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
aria-labelledby Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
as Root node to use for Button component	ElementType<any>	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Related Components

• Checkbox
• Radio