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