mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
1f0c0d041c
* Update Button prop name type to variant * fix: lint errors on running test cases * change remaining files * change typo: BUTTON_VARIANTS to BUTTON_VARIANT * fix: button.test.js lint errors * update: button instances & import in remaing files * fix: prettier warnings --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: Brad Decker <bhdecker84@gmail.com> |
||
---|---|---|
.. | ||
__snapshots__ | ||
button.constants.js | ||
button.js | ||
button.stories.js | ||
button.test.js | ||
index.js | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { Button } from './button'; import { ButtonBase } from '../button-base'; import { ButtonLink } from '../button-link'; # Button The `Button` is used for user actions. It unifies `ButtonPrimary`, `ButtonSecondary` and `ButtonLink`. <Canvas> <Story id="components-componentlibrary-button--default-story" /> </Canvas> ## Props The `Button` accepts all props below as well as all [ButtonPrimary](/docs/components-componentlibrary-buttonprimary--default-story), [ButtonSecondary](/docs/components-componentlibrary-buttonsecondary--default-story), [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story), and [Box](/docs/components-ui-box--default-story#props) component props <ArgsTable of={Button} /> The `Button` accepts all [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props <ArgsTable of={ButtonBase} /> The `Button` accepts all [ButtonPrimary](/docs/components-componentlibrary-buttonprimary--default-story), [ButtonSecondary](/docs/components-componentlibrary-buttonsecondary--default-story), [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story), and [Box](/docs/components-ui-box--default-story#props) component props <ArgsTable of={ButtonLink} /> ### Variant Use the `variant` prop and the `BUTTON_VARIANT` object from `./button.constants.js` to change the `Button` variant. Possible variants include: - `BUTTON_VARIANT.PRIMARY` - `BUTTON_VARIANT.SECONDARY` - `BUTTON_VARIANT.LINK` <Canvas> <Story id="components-componentlibrary-button--variant" /> </Canvas> ```jsx import { Button, BUTTON_VARIANT } from '../ui/component-library/button'; <Button variant={BUTTON_VARIANT.PRIMARY}>Button Primary</Button> <Button variant={BUTTON_VARIANT.SECONDARY}>Button Secondary</Button> <Button variant={BUTTON_VARIANT.LINK}>Button Link</Button> ``` ### Size Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Button`. Defaults to `Size.MD` Optional: `BUTTON_SIZES` from `./button` object can be used instead of `Size`. Possible sizes include: - `Size.inherit` inherits the font-size of the parent element. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only - `Size.auto` inherits auto height, but keeps the same button font-size. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only - `Size.SM` 32px - `Size.MD` 40px - `Size.LG` 48px <Canvas> <Story id="components-componentlibrary-button--size-story" /> </Canvas> ```jsx import { Size } from '../../../helpers/constants/design-system'; import { Button } from '../ui/component-library'; <Button size={Size.inherit} /> <Button size={Size.SM} /> <Button size={Size.MD} /> <Button size={Size.LG} /> ``` ### Danger Use the `danger` boolean prop to change the `Button` to danger color. <Canvas> <Story id="components-componentlibrary-button--danger" /> </Canvas> ```jsx import { Button } from '../ui/component-library'; <Button>Normal</Button> <Button danger>Danger</Button> ``` ### Href When an `href` prop is passed it will change the element to an anchor(`a`) tag. <Canvas> <Story id="components-componentlibrary-button--href" /> </Canvas> ```jsx import { Button } from '../ui/component-library'; <Button href="/">Anchor Element</Button>; ``` ### Block Use boolean `block` prop to quickly enable a full width block button <Canvas> <Story id="components-componentlibrary-button--block" /> </Canvas> ```jsx import { DISPLAY } from '../../../helpers/constants/design-system'; import { Button } from '../ui/component-library'; <Button>Default Button</Button> <Button block>Block Button</Button> ``` ### As Use the `as` box prop to change the element of `Button`. Defaults to `button`. When an `href` prop is passed it will change the element to an anchor(`a`) tag. Button `as` options: - `button` - `a` <Canvas> <Story id="components-componentlibrary-button--as" /> </Canvas> ```jsx import { Button } from '../ui/component-library'; <Button as="button">Button Element</Button> <Button as="a" href="#"> Anchor Element </Button> ``` ### Disabled Use the boolean `disabled` prop to disable button <Canvas> <Story id="components-componentlibrary-button--disabled" /> </Canvas> ```jsx import { Button } from '../ui/component-library'; <Button disabled>Disabled Button</Button>; ``` ### Loading Use the boolean `loading` prop to set loading spinner <Canvas> <Story id="components-componentlibrary-button--loading" /> </Canvas> ```jsx import { Button } from '../ui/component-library'; <Button loading>Loading Button</Button>; ``` ### Icon Name Use the `startIconName` and/or `endIconName` prop and the `IconName` enum from `./ui/components/component-library/icon` 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-button--start-icon-name" /> </Canvas> ```jsx import { Button } from '../ui/component-library'; import { IconName } from '../icon'; <Button startIconName={IconName.AddSquare}>Button</Button>; ``` <Canvas> <Story id="components-componentlibrary-button--end-icon-name" /> </Canvas> ```jsx import { Button } from '../ui/component-library'; import { IconName } from '../icon'; <Button endIconName={IconName.Arrow2Right}>Button</Button>; ```