mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
30520a3352
* button link housekeeping Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> |
||
---|---|---|
.. | ||
__snapshots__ | ||
button-base.constants.js | ||
button-base.js | ||
button-base.scss | ||
button-base.stories.js | ||
button-base.test.js | ||
index.js | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { ButtonBase } from './button-base'; ### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components # ButtonBase The `ButtonBase` is the base component for buttons. <Canvas> <Story id="components-componentlibrary-buttonbase--default-story" /> </Canvas> ## Props The `ButtonBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props <ArgsTable of={ButtonBase} /> ### Size Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonBase`. Defaults to `SIZES.MD` Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of `SIZES`. Possible sizes include: - `SIZES.SM` 32px - `SIZES.MD` 40px - `SIZES.LG` 48px <Canvas> <Story id="components-componentlibrary-buttonbase--size" /> </Canvas> ```jsx import { SIZES } from '../../../helpers/constants/design-system'; import { ButtonBase } from '../../component-library'; <ButtonBase size={SIZES.SM} /> <ButtonBase size={SIZES.MD} /> <ButtonBase size={SIZES.LG} /> ``` ### Block Use boolean `block` prop to quickly enable a full width block button <Canvas> <Story id="components-componentlibrary-buttonbase--block" /> </Canvas> ```jsx import { DISPLAY } from '../../../helpers/constants/design-system'; import { ButtonBase } from '../../component-library'; <ButtonBase>Default Button</ButtonBase> <ButtonBase block>Block Button</ButtonBase> ``` ### As Use the `as` box prop to change the element of `ButtonBase`. 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-buttonbase--as" /> </Canvas> ```jsx import { ButtonBase } from '../../component-library'; <ButtonBase as="button">Button Element</ButtonBase> <ButtonBase as="a" href="#"> Anchor Element </ButtonBase> ``` ### Href When an `href` prop is passed it will change the element to an anchor(`a`) tag. <Canvas> <Story id="components-componentlibrary-buttonbase--href" /> </Canvas> ```jsx import { ButtonBase } from '../../component-library'; <ButtonBase href="/metamask">Anchor Element</ButtonBase>; ``` ### Disabled Use the boolean `disabled` prop to disable button <Canvas> <Story id="components-componentlibrary-buttonbase--disabled" /> </Canvas> ```jsx import { ButtonBase } from '../../component-library'; <ButtonBase disabled>Disabled Button</ButtonBase>; ``` ### Loading Use the boolean `loading` prop to set loading spinner <Canvas> <Story id="components-componentlibrary-buttonbase--loading" /> </Canvas> ```jsx import { ButtonBase } from '../../component-library'; <ButtonBase loading>Loading Button</ButtonBase>; ``` ### Icon Name Use the `iconName` prop and the `ICON_NAMES` object from `./ui/components/component-library` to select icon. <Canvas> <Story id="components-componentlibrary-buttonbase--icon" /> </Canvas> ```jsx import { ButtonBase } from '../../component-library'; import { ICON_NAMES } from '../icon'; <ButtonBase icon={ICON_NAMES.ADD_SQUARE}>Button</ButtonBase>; ```