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

Use our custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

<button class="btn btn-primary btn-animated">
  <span>Button</span>
</button>
NameDescriptionDefaultControl
Content
Text
Text within the button.
string
-
General
Tag
Defines the HTML element used for the component.
string
-
Variant
Defines a style variant.
string
-
Size
Sets the size of the component.
string
-
Animated
Sets an animation on hover.
string
-
Icon
Icon
Defines a custom icon.To use a custom icon, you must first set up the icons in your project.
string
-
Icon only
When set to true, hides the component's text.
boolean
-
Icon position
Defines the icon position.
string
-
States
Disabled
When set to true, makes the component appear inactive and disables its functionality.
There are accessibility concerns with the disabled state.
Please read our disabled state accessibility guide.
boolean
-

Make sure the @swisspost/design-system-styles package is already present in your project or follow the installation guidelines.

To import all Design System styles:

@use '@swisspost/design-system-styles/index.scss';

To import only the styles required for this component:

@use '@swisspost/design-system-styles/basics.scss';
@use '@swisspost/design-system-styles/components/button.scss';

// required if you use icons
@use '@swisspost/design-system-styles/components/icons.scss';

The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.

Inverted buttons don't need special classes anymore, just use any of the background classes to set the background and you're done for the day.

The accent colors are deprecated

The CSS classes to apply to the buttons will be removed in the future.

There are a number of accent colors that you can apply to buttons instead of the usual colors.

Besides the usual and the accent button variations, there are also signal button colors.

These are only allowed for intranet applications!

In some situation, it is desirable to display a button using the full available width, for example when the button is displayed on mobile and stacked vertically with others.

To achieve that, you can use classes in the format:

  • .w-{size} for the xs breakpoint,
  • .w-{breakpoint}-{size} for breakpoints from sm to xxl.

For example, a button with classes w-100 w-lg-auto will use all available space only when the viewport size is smaller than lg.

To learn more about breakpoints, see the Breakpoints documentation.

Use flexbox to group and align buttons. As a best practice for keyboard navigation, order the most important button as the first occurrence in a group in the HTML and use the .flex-row-reverse, .flex-column-reverse, or .order-* classes to change the visual order.

In the following example, the send button appears first on tab navigation.