fix(dashboard-v2): fix styles of Button component
This commit is contained in:
parent
44331e93d6
commit
97240d128b
|
@ -1,41 +1,21 @@
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Primary UI component for user interaction
|
* Primary UI component for user interaction
|
||||||
*/
|
*/
|
||||||
export const Button = ({ primary, label, ...props }) => {
|
export const Button = styled.button.attrs(({ $primary }) => ({
|
||||||
return (
|
type: "button",
|
||||||
<button
|
className: `px-6 py-3 rounded-full font-sans uppercase text-xs tracking-wide text-palette-600
|
||||||
type="button"
|
${$primary ? "bg-primary" : "bg-white border-2 border-black"}`,
|
||||||
className={`min-w-button min-h-button rounded-full font-sans uppercase tracking-wide text-button
|
}))``;
|
||||||
${primary ? "bg-primary" : "bg-white border-2 border-black"}`}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Button.propTypes = {
|
Button.propTypes = {
|
||||||
/**
|
/**
|
||||||
* Is this the principal call to action on the page?
|
* Is this the principal call to action on the page?
|
||||||
*/
|
*/
|
||||||
primary: PropTypes.bool,
|
$primary: PropTypes.bool,
|
||||||
/**
|
|
||||||
* What background color to use
|
|
||||||
*/
|
|
||||||
backgroundColor: PropTypes.string,
|
|
||||||
/**
|
|
||||||
* Button contents
|
|
||||||
*/
|
|
||||||
label: PropTypes.string.isRequired,
|
|
||||||
/**
|
|
||||||
* Optional click handler
|
|
||||||
*/
|
|
||||||
onClick: PropTypes.func,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Button.defaultProps = {
|
Button.defaultProps = {
|
||||||
primary: false,
|
$primary: false,
|
||||||
onClick: undefined,
|
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue