git.iko.soy/bridge
on 859db71 help sign in
bridge/src/indigo-react/components/Button.js
68 lines 1.6 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import Grid from './Grid';
5import Flex from './Flex';
6import { HelpText } from './Typography';
8export default function Button({
9 as: As = 'a',
10 solid = false,
11 success = false,
12 disabled = false,
13 disabledDetail,
14 detail,
15 className,
16 accessory = '→',
17 onClick,
18 children,
19 ...rest
20}) {
21 return (
22 <Grid
23 as={As}
24 gap={1}
25 className={cn(
26 'pointer pv4 truncate flex-row justify-between us-none',
27 {
28 p4: solid,
29 },
30 {
31 'bg-green3': success && !disabled,
32 'bg-green1': success && disabled,
33 'bg-black': !success && solid && !disabled,
34 'bg-gray3': !success && solid && disabled,
35 'bg-transparent': !success && !solid,
36 },
37 {
38 white: solid,
39 black: !solid && !disabled,
40 gray4: !solid && disabled,
41 },
42 className
43 )}
44 style={{
45 ...(disabled && {
46 pointerEvents: 'none',
47 cursor: 'not-allowed',
48 }),
49 }}
50 onClick={!disabled && onClick ? onClick : undefined}
51 {...rest}>
52 <Grid.Item full as={Flex} justify="between">
53 <span>{children}</span>
54 <div className={cn('pl4')}>{accessory}</div>
55 </Grid.Item>
56 {detail && (
57 <Grid.Item full as={HelpText}>
58 {detail}
59 </Grid.Item>
60 )}
61 {disabled && disabledDetail && (
62 <Grid.Item full className="f6 black mt1">
63 {disabledDetail}
64 </Grid.Item>
65 )}
66 </Grid>
67 );