mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
66292330fe
* button to TS migration working demo style props broken mapping - need switch working types file working types fix dependent imports of Button variant mapping working types fix lint fix test fix ButtonSize issue on QuizContent box fix test if this works fix button being used on QuizContent fix button_variant import readme fix * fix button import * fix primary button as anchor hover * deprecated * button to TS migration fix lint fix test * fix rebase issue * fix rebase issue * lint fix |
||
---|---|---|
.. | ||
__snapshots__ | ||
button-primary.scss | ||
button-primary.stories.tsx | ||
button-primary.test.tsx | ||
button-primary.tsx | ||
button-primary.types.ts | ||
index.ts | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { ButtonPrimary } from './button-primary'; # ButtonPrimary The `ButtonPrimary` is an extension of `ButtonBase` to support primary styles. <Canvas> <Story id="components-componentlibrary-buttonprimary--default-story" /> </Canvas> ## Props <ArgsTable of={ButtonPrimary} /> ### Size Use the `size` prop and the `ButtonPrimarySize` enum from `./ui/components/component-library` to change the size of `ButtonPrimary`. Defaults to `ButtonPrimarySize.Md` Possible sizes include: - `ButtonPrimarySize.Sm` 32px - `ButtonPrimarySize.Md` 40px - `ButtonPrimarySize.Lg` 48px <Canvas> <Story id="components-componentlibrary-buttonprimary--size-story" /> </Canvas> ```jsx import { ButtonPrimary, ButtonPrimarySize } from '../../component-library'; <ButtonPrimary size={ButtonPrimarySize.Sm} /> <ButtonPrimary size={ButtonPrimarySize.Md} /> <ButtonPrimary size={ButtonPrimarySize.Lg} /> ``` ### Danger Use the `danger` boolean prop to change the `ButtonPrimary` to danger color. <Canvas> <Story id="components-componentlibrary-buttonprimary--danger" /> </Canvas> ```jsx import { ButtonPrimary } from '../../component-library'; <ButtonPrimary>Normal</ButtonPrimary> <ButtonPrimary danger>Danger</ButtonPrimary> ```