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