Button

Buttons are interactive elements used for single-step actions.
5 colors, 3 sizes and 3 variants
Automatically resolves to correct HTML tag
Full keyboard navigation
Similar components:
LinkMenu ItemActionable


Usage

Button accepts children property to render its content. It can be any content from text to a group of elements stacked together inside the Button.

Button works with both href and onClick properties. Using either of them will resolve Button rendering to <a> or <button> tag respectively.

If you use Button for client-side routing, make sure to pass href property to it together with onClick. That will render Button using a correct html tag keeping native behavior working like expected. For instance, your navigation links using Button component can still be opened in a new tab in that case.

Variants

Button supports multiple variants depending on the context they are used in. For instance, outlined or ghost variants can be used as secondary buttons when rendering a group of actions.

Colors

Button is using neutral color by default but supports other color values with a color property. That way you can emphasize on your main call-to-action button using primary button or get the user focus on the operation with critical color.

When you need a button to be displayed over the media content – you can use either white or black button color. These values are using static color tokens, which means they look the same in both light and dark mode. That's quite important for media content since images and videos preserve their colors in both modes.

Sizes

Button comes in 3 size with medium size used by default.

  • large size can be used for marketing pages or section
  • small size can be used in cases when there is limited space available for rendering, like in complex tools or dashboards

Button width is automatically defined by the content inside it. In case if you want to stretch Button to the full-width of its parent element, you can use fullWidth property. For example, that can be used on mobile viewports where most of the buttons usually take full width of the page sections.

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 the Button click events without disabling it visually.

Buttons that are used for actions can also be disabled from the user input with disabled flag. That will completely prevent user from interacting with the Button.

Icon support

Icon can be rendered on either side of the Button text content with an icon property, which will automatically wrap SVG you pass to it with an Icon utility. Only one icon can be displayed simultaneously.

If there is not enough space to display a text label, Button can be rendered with just an icon. In this case, make sure to also pass aria-label attribute to the Button or wrap it with Tooltip component to keep it accessible for screen readers.

Rounded

If you want to differentiate specific buttons in the product or turn them into circular Buttons, you can use rounded flag for both buttons with text and only icons.

Elevation

You could use Button elevated property when you want to add a shadow to it. For example, this can used for rendering Buttons on top of maps or any decorative backgrounds. Note that elevated property is not supported for the ghost variant.

Composition

As you may have noticed, we're using a Stack component in the examples to group the buttons together. When using ghost buttons - it may cause a misalignment with the content since its background is not visible.

In this case you can use Button.Aligner utility which will adjust the space automatically. Passing a position property to it will define on which sides of the Button it needs to be aligned with the content.

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.

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, black, white-false
variantghost, outlined-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
Previous
Next