git.iko.soy/bridge
on 3191538 help sign in
bridge/src/indigo-react/components/IconButton.js
54 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 flush = false, // if true, remove horizontal padding
14 ...rest
15}) {
16 return (
17 <Flex
18 as="a"
19 align="center"
20 justify="center"
21 className={cn(
22 'pointer pv2',
23 {
24 ph2: !flush,
25 },
26 {
27 'bg-black': solid && !secondary && !disabled,
28 'bg-gray3': (solid && disabled) || (solid && secondary),
29 'bg-gray2': !solid && secondary && disabled,
30 'bg-transparent': !solid,
31 },
32 {
33 white: solid,
34 black: !solid && !disabled,
35 gray4: !solid && disabled,
36 },
37 className
38 )}
39 style={{
40 width: '1rem',
41 height: '1rem',
42 fontSize: '1rem',
43 fontWeight: 'bold',
44 ...(disabled && {
45 pointerEvents: 'none',
46 cursor: 'not-allowed',
47 }),
48 }}
49 onClick={onClick ? () => !disabled && onClick() : undefined}
50 {...rest}>
51 {children}
52 </Flex>
53 );