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