git.iko.soy/bridge
on 54fae1c help sign in
bridge/src/indigo-react/components/Button.js
70 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 background,
19 children,
20 ...rest
21}) {
22 return (
23 <Grid
24 as={As}
25 gap={1}
26 className={cn(
27 'rel pointer pv4 truncate flex-row justify-between us-none',
28 {
29 p4: solid,
30 },
31 {
32 'bg-green3': success && !disabled,
33 'bg-green1': success && disabled,
34 'bg-black': !success && solid && !disabled,
35 'bg-gray3': !success && solid && disabled,
36 'bg-transparent': !success && !solid,
37 },
38 {
39 white: solid,
40 black: !solid && !disabled,
41 gray4: !solid && disabled,
42 },
43 className
44 )}
45 style={{
46 ...(disabled && {
47 pointerEvents: 'none',
48 cursor: 'not-allowed',
49 }),
50 }}
51 onClick={!disabled && onClick ? onClick : undefined}
52 {...rest}>
53 {background}
54 <Grid.Item full as={Flex} justify="between" className="z2">
55 <span>{children}</span>
56 <div className={cn('pl4')}>{accessory}</div>
57 </Grid.Item>
58 {detail && (
59 <Grid.Item full as={HelpText} className="z2">
60 {detail}
61 </Grid.Item>
62 )}
63 {disabled && disabledDetail && (
64 <Grid.Item full className="f6 black mt1 z2">
65 {disabledDetail}
66 </Grid.Item>
67 )}
68 </Grid>
69 );