mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-25 11:28:51 +01:00
065c499753
* update ButtonIcon to TS lint updates fix lint issues add ref fix as prop test updates * box and icon updates for support * Update ui/components/component-library/text-field/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * fix disabled * update types for as * update readme * fix storybook * george changes to button icon * revert headerbase * box prop back to HTMLElementTagNameMap --------- Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
148 lines
3.9 KiB
Plaintext
148 lines
3.9 KiB
Plaintext
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
|
import { ButtonIcon } from './button-icon';
|
|
|
|
# ButtonIcon
|
|
|
|
The `ButtonIcon` is used for icons associated with a user action.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonicon--default-story" />
|
|
</Canvas>
|
|
|
|
## Props
|
|
|
|
The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
|
|
|
<ArgsTable of={ButtonIcon} />
|
|
|
|
### Icon Name<span style={{ color: 'red' }}>\*</span>
|
|
|
|
Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon.
|
|
|
|
Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonicon--icon-name-story" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonIcon } from '../ui/component-library';
|
|
import { IconName } from '../icon';
|
|
|
|
<ButtonIcon iconName={IconName.Close} ariaLabel="Close" />;
|
|
```
|
|
|
|
### Size
|
|
|
|
Use the `size` prop and the `ButtonIconSize` enum from `./ui/components/component-library/icon` to change the size of `ButtonIcon`. Defaults to `ButtonIconSize.Sm`
|
|
|
|
Possible sizes include:
|
|
|
|
- `ButtonIconSize.Sm` 24px
|
|
- `ButtonIconSize.Lg` 32px
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonicon--size-story" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonIconSize } from '../../../helpers/constants/design-system';
|
|
import { ButtonIcon } from '../ui/component-library';
|
|
|
|
<ButtonIcon size={ButtonIconSize.Sm} iconName={IconName.Close} ariaLabel="Close"/>
|
|
<ButtonIcon size={ButtonIconSize.Lg} iconName={IconName.Close} ariaLabel="Close"/>
|
|
```
|
|
|
|
### Aria Label
|
|
|
|
Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibility
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonicon--aria-label" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonIcon, IconName } from '../ui/component-library';
|
|
import { Color } from '../../../helpers/constants/design-system';
|
|
|
|
|
|
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
|
|
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
|
```
|
|
|
|
### As
|
|
|
|
Use the `as` box prop to change the element of `ButtonIcon`. Defaults to `button`.
|
|
|
|
Button `as` options:
|
|
|
|
- `button`
|
|
- `a`
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonicon--as" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonIcon, IconName } from '../ui/component-library';
|
|
import { Color } from '../../../helpers/constants/design-system';
|
|
|
|
|
|
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
|
|
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
|
```
|
|
|
|
### Href
|
|
|
|
When an `href` prop is passed it will change the element to an anchor(`a`) tag.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonicon--href" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonIcon, IconName } from '../ui/component-library';
|
|
import { Color } from '../../../helpers/constants/design-system';
|
|
|
|
<ButtonIcon
|
|
href="https://metamask.io/"
|
|
target="_blank"
|
|
iconName={IconName.Export}
|
|
color={Color.primaryDefault}
|
|
ariaLabel="Visit MetaMask.io"
|
|
/>;
|
|
```
|
|
|
|
### Color
|
|
|
|
Use the `color` prop and the `Color` object to change the color of the `ButtonIcon`. Defaults to `Color.iconDefault`.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonicon--color-story" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonIcon, IconName } from '../ui/component-library';
|
|
import { Color } from '../../../helpers/constants/design-system';
|
|
|
|
<ButtonIcon
|
|
iconName={IconName.Export}
|
|
color={Color.primaryDefault}
|
|
ariaLabel="Visit MetaMask.io"
|
|
/>;
|
|
```
|
|
|
|
### Disabled
|
|
|
|
Use the boolean `disabled` prop to disable button
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonicon--disabled" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonIcon } from '../ui/component-library';
|
|
|
|
<ButtonIcon iconName={IconName.Close} disabled ariaLabel="Close" />;
|
|
```
|