Button
Buttons are interactive elements used for single-step actions.

Usage

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.

Variants

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.

Alternatively, you could use Button elevated property when you want to make the button more prominent. One of the real life use-cases for such buttons are map controls. Note that adding elevated to an outlined button will also make its background non-transparent.

Colors

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.

States

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.

Sizes

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.

Rounded

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.

Composition

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.

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.

Accessibility

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.

Properties

Base properties:

NameTypeDefaultRequiredComment
childrenReactNode-false
iconReact.Component-falseIcon svg node
iconPositionstart, endstartfalseSide of the button for icon render
colorprimary, critical-false
variantghost, outlined, media-false
elevatedboolean-false
sizelarge, medium, smallmediumfalse
loadingboolean-false
fullWidthboolean-false
roundedboolean-false
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:

NameTypeDefaultRequiredComment
hrefstring-false
onClick(event) => {}-false

Button properties, when used without href property:

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

Aligner properties:

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