Buttons are interactive elements used for single-step actions.


Button can be rendered either by using children property.

Button supports both, href and onClick properties, which cause Button to be rendered as an <a> or a <button> tag.

Note: If you use dynamic routing with onClick, make sure to pass href as well to preserve the regular <a> tag functionality. For instance, that will keep Open Link in a New Tab function for your product users.


Button supports multiple variants depending on the context they are used in. For instance, if you want a button to draw less attention or need a secondary button when grouping them together, you can use outlined, ghost or text variant.

When you need a button to be displayed over the media content – there is a media variant you can use.


By default, Button is using neutral colors but sometimes you might want to draw user's attention to specific actions. For instance, Button can be used as a call to action (CTA), or a way to perform a critical operation. In those cases you can use primary or critical colors respectively.

While solid and outlined buttons have their backgrounds defined which makes their text accessible, ghost and text buttons rely on the context they are used in. This might make them inaccessible when used on top of other colored elements. To solve that, we provide an additional inherit color value just for the ghost buttons. It will make the button use the value from css currentColor for both, background and text color.


If button is used for asynchronous actions, use the loading property to give feedback to the user. Turning the loading state on will prevent all the button click event without disabling it visually.

Buttons that are used for actions can also be disabled from the user input with disabled flag.


Button supports large size for specific use cases like content promotion or small size, for instance for complex controls in tooling.

By default, Button width is defined by its content, but you might also want to let a Button take the full width of its parent with fullWidth property. That helps with changing the Button layout on mobile devices but also serves as way to apply a custom width to a Button without overriding any of its styles.

Icon support

Sometimes using text on its own is not enough and adding an icon can help user understand the meaning of the action. Icon can be used on either of the label depending on the use-case.

On the other hand, there are situations when there is not enough space for displaying text labels. You can use buttons with icons and no text label to provide a better user experience.

Note: When using no visually displayed labels, make sure to either assign an aria-label to the button or wrap it with a Tooltip component.


Sometimes you want to differentiate specific buttons in the product or turn them into rounded controls that are used over interactive content like maps. That can be solved with rounded flag for both, buttons with text and only icons.


As you may have noticed, we're using a Stack component in the examples to group the buttons together. However, when using ghost buttons - it may cause a misalignment with the content. To solve this issue - you can use Button.Aligner utility which will adjust the space automatically. It can be used for both, either for both, vertical and horizontal directions by default or only for horizontal one.

React components that make your product shine.

This approach can be used for adding icon only buttons to your components without having them take extra space. In this case we're also not passing the position value to the Aligner component, so it applies alignment on all sides by default.


Other options

If Button component functionality doesn't solve your use-case, make sure to check other components in the library.


Make sure to pass a meaningful aria-label to the component when used without any visually displayed text label.

Button click event triggers on both, Space and Enter key presses.


Base properties:

iconReact.Component-falseIcon svg node
iconPositionstart, endstartfalseSide of the button for icon render
colorprimary, critical-false
variantghost, outlined, media-false
sizelarge, medium, smallmediumfalse
highlightedboolean-falseHighlight the button as in hover state
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

Link properties, when used with href property:

onClick(event) => {}-false

Button properties, when used without href property:

typebutton, submit, resetbuttonfalse
onClick(event) => {}-false

Aligner properties:

childrenReactNode-falseReplacement for text
positionstart, end, top, bottom[]-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element