import { Canvas, Controls, Meta } from '@storybook/blocks'; import LinkTo from '@storybook/addon-links/react'; import * as ButtonStories from './button.stories'; import StylesPackageImport from '../../../shared/styles-package-import.mdx';
<StylesPackageImport components={["button"]} required={{ icons: true }} />
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.
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 contextual button colors.
These are only allowed for intranet applications!
In some situation, it is desirable to display a button using the full available space width, for example when the button is displayed on mobile and stacked vertically with others.
To achieve that, you can use .w-breakpoint-sizes. e.g. .w-sm-100 to use the full available space from sm viewport size.