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.
A button triggers an action or event when activated.
See also:
MenuButton, ToggleButton, CompoundButton
Name | Description | Default | Control |
---|---|---|---|
icon | Icon that renders either before or after the children as specified by the iconPosition prop.ShorthandProps<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | - | |
as | "a""button" | - | |
disabledFocusable | When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons. boolean | false | |
appearance | A button can have its content and borders styled for greater emphasis or to be subtle. - 'primary': Emphasizes the button as a primary action. - 'outline': Removes background styling. - 'subtle': Minimizes emphasis to blend into the background until hovered or focused. - 'transparent': Removes background and border styling. "outline""subtle""primary""transparent" | - | |
block | A button can fill the width of its container. boolean | false | |
iconPosition | A button can format its icon to appear before or after its content. "before""after" | "'before'" | |
shape | A button can be rounded, circular, or square. "circular""square""rounded" | "'rounded'" | |
size | A button supports different sizes. "small""medium""large" | "'medium'" |