Button

A Button is a clickable element used to initialize an action.

Import#

import { Button } from '@volue/wave-react';

Examples#

Basic#

Variants#

We provide buttons of three "visual" variants: strong (high emphasis), outline (medium emphasis) and ghost (low emphasis).

Sizes#

Wave provides two button sizes ‐ medium and small, with exception of lone icon buttons which can also be xSmall or xxSmall.

medium size buttons are used by default.
small size buttons and xSmall lone icon buttons can be used in cases when there is limited space available for rendering, like in data tables or complex dashboards.

Responsive#

Button supports responsive syntax for its size property, which means you can change its size based on the viewport.

Multi-sizing#

Wave provides applySizes utility, which lets you specify size "scopes" within your app.

import { applySizes } from '@volue/wave-react';

All buttons within a scope will share the same size unless overwritten on a per-control basis.

Color scheme#

You can theme the buttons using color prop.

Different button color schemes have special purposes that are indicating specific actions to the users. Check the guidelines below for details.

Default#

Success/Danger#

Button with icon#

You can add left and right icons to the Button component using the leftIcon and rightIcon props respectively.

Icon only button#

Buttons may include an icon without a label. Icon only buttons work well in compact spaces.

Please provide aria-label prop to support assistive technology (i.e. screen readers) or wrap the button with a tooltip.

Button states#

Disabled#

Each button may be displayed as disabled.

Loading#

Pass the isLoading prop to show button in a loading state. By default, the button will show a spinner and leave the button's width unchanged.

You can also pass the loadingText prop to show a spinner and the loading text.

As link#

Elements that are visually equivalent to buttons but change the URL and link to a new experience should be rendered as HTML anchor tags. Provide an as prop, and the button will render as an anchor tag.

as prop allows you to change the component to a different HTML tag or custom component (so called polymorphism).

This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. You can now pass extra props to the underlying <a> element such as href etc. and it's perfectly type-safe 🎉

API Reference#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value
`variant`	`enum`	`"strong"`
`size`	`enum`	No default value
`color`	`enum`	`"default"`
`leftIcon`	`React.ReactElement`	No default value
`rightIcon`	`React.ReactElement`	No default value
`withLoneIcon`	`boolean`	`false`
`shape`	`enum`	`"default"`
`isLoading`	`boolean`	`false`
`loadingText`	`string`	No default value
`isDisabled`	`boolean`	`false`
`isActive`	`boolean`	`false`
`isNarrow`	`boolean`	`false`