xxxxxxxxxx
<Button color="black">Click Me</Button>
<Div borderColor="green"></Div>
const Button = styled.button`
padding: 2px 5px;
color: ${props => props.color ? props.color : "white"};
border-radius: 3px;
`
const Div = styled.div`
padding: 10px;
color: palevioletred;
border: 1px solid ${props => props.borderColor ? props.borderColor : "palevioletred"};
`
xxxxxxxxxx
<Separator thin />
const Separator = styled.div`
display: block;
width: 100%;
height: 1px;
margin: ${props => props.thin? '7px auto 0':'10px auto'};
`;
export default Separator;
xxxxxxxxxx
const Button = styled.button<{ $primary?: boolean; }>`
/* Adapt the colors based on primary prop */
background: ${props => props.$primary ? "#BF4F74" : "white"};
color: ${props => props.$primary ? "white" : "#BF4F74"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid #BF4F74;
border-radius: 3px;
`;
render(
<div>
<Button>Normal</Button>
<Button $primary>Primary</Button>
</div>
);