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