bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-31 07:33:23 +00:00
Code Issues Releases Wiki Activity

adds button story and docs for button with icon spacing (#14198)

Browse Source 
* add story & docs for button with icon spacing

* add back block story removed in error

* remove unnecessary args
This commit is contained in:
Bryan Cunningham
2025-04-10 14:17:37 -04:00
committed by GitHub
parent 11e5bc6104
commit c59b321dbb
2 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
libs/components/src/button/button.mdx
View File

@@ -73,6 +73,27 @@ where the width is fixed and the text wraps to 2 lines if exceeding the button
<Canvas of={stories.Block} />
## With Icon
To ensure consistent icon spacing, the icon should have .5rem spacing on left or right(depending on
placement).
> NOTE: Use logical css properties to ensure LTR/RTL support.
**If icon is placed before button label**
```html
<i class="bwi bwi-plus tw-me-2"></i>
```
**If icon is placed after button label**
```html
<i class="bwi bwi-plus tw-ms-2"></i>
```
<Canvas of={stories.WithIcon} />
## Accessibility
Please follow these guidelines to ensure that buttons are accessible to all users.