Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const PrimaryButton = props => {
const dataProps = {
'data-track-component': 'PrimaryButton',
...filterInvalidAttributes(omit(props, propsToOmit)),
// if there is a divergence between `isDisabled` and `disabled`,
// we fall back to `isDisabled`
disabled: props.isDisabled,
};
const isActive = props.isToggleButton && props.isToggled;
return (
export const FlatButton = props => {
const dataProps = {
'data-track-component': 'FlatButton',
...filterInvalidAttributes(omit(props, propsToOmit)),
// if there is a divergence between `isDisabled` and `disabled`,
// we fall back to `isDisabled`
disabled: props.isDisabled,
};
return (
{
const overwrittenVars = {
...vars,
...theme,
export const SecondaryIconButton = props => {
const buttonAttributes = {
...filterInvalidAttributes(omit(props, propsToOmit)),
'data-track-component': 'SecondaryIconButton',
// if there is a divergence between `isDisabled` and `disabled`,
// we fall back to `isDisabled`
disabled: props.isDisabled,
};
return (
getBaseStyles(theme, props)}
>
{props.icon}
export const IconButton = props => {
const attributes = {
'data-track-component': 'IconButton',
...filterInvalidAttributes(props),
};
const isActive = props.isToggleButton && props.isToggled;
return (
export const SecondaryButton = props => {
const isActive = props.isToggleButton && props.isToggled;
const shouldUseLinkTag = !props.isDisabled && Boolean(props.linkTo);
const asProps = shouldUseLinkTag ? { as: Link } : { as: props.as };
const buttonAttributes = {
'data-track-component': 'SecondaryButton',
...filterInvalidAttributes(props),
...(shouldUseLinkTag ? { to: props.linkTo } : {}),
};
const containerStyles = [
css`
display: inline-flex;
background-color: ${vars.colorSurface};
border-radius: ${vars.borderRadius6};
box-shadow: ${vars.shadow7};
color: ${vars.colorSolid};
font-size: ${vars.fontSizeDefault};
transition: background-color ${vars.transitionLinear80Ms},
box-shadow ${vars.transitionEaseinout150Ms};
`,
getStateStyles(props.isDisabled, isActive, props.theme),
getThemeStyles(props.theme),