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.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Button

Figma Design

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">Button</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
-
Icon
Icon
Defines a custom icon.
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.
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/post-compact.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.

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 xl.

For example, a button with classes w-full 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.