Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Primary
,
Secondary
,
]
/* eslint-enable react/jsx-key */
const flexStart = css`
display: flex;
flex-direction: row;
justify-content: flex-start;
> div {
margin-right: ${size.medium}px;
}
`
export default {
title: "Button",
component: Button,
}
export const priorityLight = () => (
<div></div>
color: ${button.textTertiary};
&:hover {
text-decoration: underline;
}
`
export const defaultSize = css`
height: ${size.large}px;
min-height: ${size.large}px;
padding: 0 ${size.large / 2}px;
border-radius: ${size.large / 2}px;
`
export const smallSize = css`
height: ${size.medium}px;
min-height: ${size.medium}px;
padding: 0 ${size.medium / 2}px;
border-radius: ${size.medium / 2}px;
`
export const iconDefault = css`
svg {
flex: 0 0 auto;
display: block;
fill: currentColor;
position: relative;
width: ${size.large / 2}px;
height: auto;
}
`
flex: 0 0 auto;
display: block;
fill: currentColor;
position: relative;
width: ${size.large / 2}px;
height: auto;
}
`
export const iconSmall = css`
svg {
flex: 0 0 auto;
display: block;
fill: currentColor;
position: relative;
width: ${size.medium / 2}px;
height: auto;
}
`
export const iconRight = css`
svg {
margin: 0 ${-size.large / 8}px 0 ${size.large / 4}px;
}
`
export const iconLeft = css`
flex-direction: row-reverse;
svg {
margin: 0 ${size.large / 4}px 0 ${-size.large / 8}px;
}
`