1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/component-library/button-secondary/button-secondary.js
Garrett Bear a28d727caf
Feat/16290/add button component (#16305)
* add button component

* add all button props

* update tests

* add button type prop

* fix base button size const

* add href prop to button base

* Update ui/components/component-library/button/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/component-library/button/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* update tests

* Update ui/components/component-library/button-primary/button-primary.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/component-library/button/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/component-library/button/button.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/component-library/button/button.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/component-library/button/button.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* update button props on readme

* linting issue fix

Co-authored-by: George Marshall <george.marshall@consensys.net>
2022-11-09 13:55:13 -08:00

46 lines
1.1 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ButtonBase } from '../button-base';
import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
export const ButtonSecondary = ({
className,
danger,
size = BUTTON_SECONDARY_SIZES.MD,
...props
}) => {
return (
<ButtonBase
className={classnames(className, 'mm-button-secondary', {
'mm-button-secondary--type-danger': danger,
})}
size={size}
{...props}
/>
);
};
ButtonSecondary.propTypes = {
/**
* An additional className to apply to the ButtonSecondary.
*/
className: PropTypes.string,
/**
* When true, ButtonSecondary color becomes Danger.
*/
danger: PropTypes.bool,
/**
* The possible size values for ButtonSecondary: 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
* Default value is 'SIZES.MD'.
*/
size: PropTypes.oneOf(Object.values(BUTTON_SECONDARY_SIZES)),
/**
* ButtonSecondary accepts all the props from ButtonBase
*/
...ButtonBase.propTypes,
};
export default ButtonSecondary;