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