diff --git a/packages/status-react/src/system/button/button.tsx b/packages/status-react/src/system/button/button.tsx index 5441c4a..2c87df4 100644 --- a/packages/status-react/src/system/button/button.tsx +++ b/packages/status-react/src/system/button/button.tsx @@ -14,6 +14,7 @@ interface Props { type?: ButtonProps['type'] onClick?: ButtonProps['onClick'] variant?: Variants['variant'] + size?: Variants['size'] } const Button = (props: Props, ref: Ref) => { diff --git a/packages/status-react/src/system/button/styles.tsx b/packages/status-react/src/system/button/styles.tsx index cf81f3b..6a7d326 100644 --- a/packages/status-react/src/system/button/styles.tsx +++ b/packages/status-react/src/system/button/styles.tsx @@ -9,11 +9,12 @@ export const Base = styled('button', { fontFamily: '$sans', fontWeight: '$500', fontSize: '15px', + lineHeight: 1.4, position: 'relative', display: 'inline-flex', justifyContent: 'center', alignItems: 'center', - padding: '11px 24px', + padding: '12px 24px', borderRadius: '$8', transitionProperty: 'background-color, border-color, color, fill, stroke', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', @@ -52,6 +53,12 @@ export const Base = styled('button', { }, }, }, + size: { + small: { + fontSize: '13px', + padding: '10px 12px', + }, + }, loading: { true: {}, },