mirror of
https://github.com/bitwarden/browser
synced 2026-02-12 14:34:02 +00:00
86 lines
2.0 KiB
Plaintext
86 lines
2.0 KiB
Plaintext
import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
|
||
|
||
import * as stories from "./icon-button.stories";
|
||
|
||
<Meta of={stories} />
|
||
|
||
```ts
|
||
import { IconButtonModule } from "@bitwarden/components";
|
||
```
|
||
|
||
<Title />
|
||
<Description />
|
||
|
||
<Primary />
|
||
<Controls />
|
||
|
||
## Usage
|
||
|
||
Icon buttons can be found in other components such as: the
|
||
[banner](?path=/docs/component-library-banner--docs)
|
||
[dialog](?path=/docs/component-library-dialogs--docs), and
|
||
[table](?path=/docs/component-library-table--docs).
|
||
|
||
## Styles
|
||
|
||
### Main
|
||
|
||
Used for general icon buttons appearing on the theme’s main `background`
|
||
|
||
<Canvas of={stories.Main} />
|
||
|
||
### Muted
|
||
|
||
Used for low emphasis icon buttons appearing on the theme’s main `background`
|
||
|
||
<Canvas of={stories.Muted} />
|
||
|
||
### Contrast
|
||
|
||
Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and
|
||
banners.
|
||
|
||
<Canvas of={stories.Contrast} />
|
||
|
||
### Danger
|
||
|
||
Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of
|
||
the dialog component.
|
||
|
||
<Canvas of={stories.Danger} />
|
||
|
||
### Primary
|
||
|
||
Used in place of the main button component if no text is used. This allows the button to display
|
||
square.
|
||
|
||
<Canvas of={stories.Primary} />
|
||
|
||
### Nav Contrast
|
||
|
||
Used on the side nav background that is dark in both light theme and dark theme.
|
||
|
||
<Canvas of={stories.NavContrast} />
|
||
|
||
## Sizes
|
||
|
||
There are 2 sizes for the icon button: `small` and `default`.
|
||
|
||
Default is typically used for most instances. Small is used if the implementation needs a variant
|
||
with less padding around the icon, such as in the navigation component.
|
||
|
||
### Small
|
||
|
||
<Canvas of={stories.Small} />
|
||
|
||
### Default
|
||
|
||
<Canvas of={stories.Default} />
|
||
|
||
## Accessibility
|
||
|
||
Follow guidelines outlined in the [Button docs](?path=/docs/component-library-button--doc)
|
||
|
||
label input will be used to set the `aria-label` attributes on the button. This is for accessibility
|
||
purposes, as it provides a text alternative for the icon button.
|