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