diff --git a/packages/dashboard-v2/src/components/Button/Button.js b/packages/dashboard-v2/src/components/Button/Button.js index 230a5a93..165935a2 100644 --- a/packages/dashboard-v2/src/components/Button/Button.js +++ b/packages/dashboard-v2/src/components/Button/Button.js @@ -1,41 +1,21 @@ import PropTypes from "prop-types"; +import styled from "styled-components"; /** * Primary UI component for user interaction */ -export const Button = ({ primary, label, ...props }) => { - return ( - - ); -}; - +export const Button = styled.button.attrs(({ $primary }) => ({ + type: "button", + className: `px-6 py-3 rounded-full font-sans uppercase text-xs tracking-wide text-palette-600 + ${$primary ? "bg-primary" : "bg-white border-2 border-black"}`, +}))``; Button.propTypes = { /** * Is this the principal call to action on the page? */ - primary: PropTypes.bool, - /** - * What background color to use - */ - backgroundColor: PropTypes.string, - /** - * Button contents - */ - label: PropTypes.string.isRequired, - /** - * Optional click handler - */ - onClick: PropTypes.func, + $primary: PropTypes.bool, }; Button.defaultProps = { - primary: false, - onClick: undefined, + $primary: false, };