No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Button

When using a button please always follow a11y rules (e.g. W3C Recommendation 3.3.2 Labels or instructions) and make sure the context in which the button is located is also communicated by screen readers.

Primary

Used for "call to action", i.e. triggering the main action. There should never be more than one on a page. If you need multiple buttons for different actions, decide which action is the most important and make that the primary Button. All other Button components should be secondary.

If there is no primary action, all Button components should be secondary.

Secondary

The secondary Button is the default button style and can trigger various actions. How it is used depends on its surroundings:

  1. When next to the primary Button, the Secondary style can for example be used for "Cancel" or "Abort" actions.
  2. When there is no main important action on a given page, all Button components should use the secondary style.

Destructive

Used for triggering a removing or deleting action. Because of its dominant coloring, it should be used sparingly. If you need multiple Destructive Button components in one view, we recommend using a secondary Button or Link variant instead and only use the Destructive variant to double confirm.

Text

To add an anchor that looks like a button use the <LinkButton> component and pass a href prop.

SmallMediumLarge

Props

NameDescriptionDefault
size
"xs""sm""md""lg"
"md"
variant
"primary""secondary""destructive""success"
"primary"
fill
"solid""outline""text"
"solid"
icon
ReactElement<any, string | JSXElementConstructor<any>> | "play" | "google" | "microsoft" | "github" | "gitlab" | "okta" | "discord" | ... 253 more ...
-
className
string
-
fullWidth
boolean
-
type
"button""submit""reset"
"button"
tooltip
Tooltip content to display on hover
PopoverContent
-
tooltipPlacement
Position of the tooltip
"auto""bottom""top""left""right""bottom-start""bottom-end""top-start"
-