git.iko.soy/bridge
on 703ff86 help sign in
bridge/src/indigo-react/components/IconButton.jsx
56 lines 1.2 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import Flex from './Flex';
6export default function IconButton({
7 children,
8 className,
9 onClick,
10 disabled = false,
11 secondary = false,
12 solid = false,
13 hpadding = true,
14 vpadding = true,
15 ...rest
16}) {
17 return (
18 <Flex
19 as="a"
20 align="center"
21 justify="center"
22 className={cn(
23 'pointer',
24 {
25 ph2: hpadding,
26 pv2: vpadding,
27 },
28 {
29 'bg-black': solid && !secondary && !disabled,
30 'bg-gray3': (solid && disabled) || (solid && secondary),
31 'bg-gray2': !solid && secondary && disabled,
32 'bg-transparent': !solid,
33 },
34 {
35 white: solid,
36 black: !solid && !disabled,
37 gray4: !solid && disabled,
38 },
39 className
40 )}
41 style={{
42 width: '1rem',
43 height: '1rem',
44 fontSize: '1rem',
45 fontWeight: 'bold',
46 ...(disabled && {
47 pointerEvents: 'none',
48 cursor: 'not-allowed',
49 }),
50 }}
51 onClick={onClick ? () => !disabled && onClick() : undefined}
52 {...rest}>
53 {children}
54 </Flex>
55 );