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