mirror of
https://github.com/bitwarden/browser
synced 2026-02-04 18:53:20 +00:00
3a802f99a3
* use tooltip in a11y directive
* remove commented code
* add deprecation warning to appA11yTitle directive
* use label for tooltip in carousel nav
* wait for timeout before assertion
* remove unnecessary title directive use
* fix private variable lint errors
* increase tooltip show delay
* fix spec delay and export as constant
* use delay constant
---------
Co-authored-by: Vicki League <vleague@bitwarden.com>
(cherry picked from commit 963a9156fb)
86 lines
2.0 KiB
Plaintext
86 lines
2.0 KiB
Plaintext
import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
|
||
|
||
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.
|