status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(system): add small size button variant

This commit is contained in:
Pavel Prichodko 2022-04-06 10:34:50 +02:00
parent 4c0800e5ef
commit 12b0e9d715
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/status-react/src/system/button/button.tsx
View File

@ -14,6 +14,7 @@ interface Props {
type?: ButtonProps['type'] type?: ButtonProps['type']
onClick?: ButtonProps['onClick'] onClick?: ButtonProps['onClick']
variant?: Variants['variant'] variant?: Variants['variant']
size?: Variants['size']
} }
const Button = (props: Props, ref: Ref<HTMLButtonElement>) => { const Button = (props: Props, ref: Ref<HTMLButtonElement>) => {

9
packages/status-react/src/system/button/styles.tsx
View File

@ -9,11 +9,12 @@ export const Base = styled('button', {
fontFamily: '$sans', fontFamily: '$sans',
fontWeight: '$500', fontWeight: '$500',
fontSize: '15px', fontSize: '15px',
lineHeight: 1.4,
position: 'relative', position: 'relative',
display: 'inline-flex', display: 'inline-flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
padding: '11px 24px', padding: '12px 24px',
borderRadius: '$8', borderRadius: '$8',
transitionProperty: 'background-color, border-color, color, fill, stroke', transitionProperty: 'background-color, border-color, color, fill, stroke',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', 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: { loading: {
true: {}, true: {},
}, },