Mixins


Used to reset button styles to a baseline.

import { styles } from '@sparkpost/matchbox';
const CustomButtom = styled.button`
${styles.buttonReset}
`;

Used to hide an element visually, while still available to screen readers or assistive technology.

import { styles } from '@sparkpost/matchbox';
const Hide = styled.div`
${styles.visuallyHidden}
`;

import { styles } from '@sparkpost/matchbox';
const Button = styled.button`
${styles.focusOutline(options)}
`;
color
string
default: tokens.color_blue_700
Color of the focus ring
modifier
string
default: '&:focus'
Selector to target focus
offest
string
default: '3px'
Distance of the focus ring to the element