1interface IButtonProps {
2    className?: string;
3    flat?: boolean;
4    outline?: boolean;
5    styles?: React.CSSProperties;
6    variant?: 'primary' | 'secondary' | 'default';
7    icon?: string;
8    children?: React.ReactNode;
9}
10
11export type ButtonProps = IButtonProps & JSX.IntrinsicElements['button'];

1import { Button } from 'neutrino-ui';
2
3<Button type="button" onClick={console.log}>
4  Default button
5</Button>

1import { Button } from 'neutrino-ui';
2
3<Button type="button" onClick={console.log} variant="primary" flat={true} outline={true}>
4  Primary button
5</Button>

1import { Button } from 'neutrino-ui';
2
3<Button type="button" onClick={console.log} variant="secondary">
4  Secondary button
5</Button>

1import { Button } from 'neutrino-ui';
2import CheckIcon from './CheckIcon';
3
4<Button type="button" onClick={console.log} variant="primary">
5  <CheckIcon /> Primary button
6</Button>

1import React from 'react';
2import { ThemeProvider } from 'emotion-theming';
3import { Button, createTheme, ITheme } from 'neutrino-ui';
4
5const theme: ITheme = {
6colors: {
7  mainColors: {
8    primary: '#34B334',
9    primaryDark: '#144D14',
10    },
11  },
12  globals: {
13   borderRadius: '32px'
14  }
15};
16
17const myTheme = createTheme(theme);
18
19<ThemeProvider theme={myTheme}>
20  <Button
21    type="button"
22    onClick={console.log}
23    variant="primary"
24    css={{width: '250px'}}>
25      Themed Primary button
26  </Button>
27</ThemeProvider>

1<Button
2  type="button"
3  onClick={console.log}
4  variant="secondary"
5  css={{ borderRadius: '100%', minWidth: '48px', width: '48px', height: '48px' }}>
6    <CheckIcon />
7</Button>

1function CustomCheckedButton() {
2  const [isHovered, setHover] = React.useState(false);
3
4  return <Button
5      onClick={console.log}
6      variant="primary"
7      outline
8      flat
9      onMouseEnter={() => setHover(true)}
10      onMouseLeave={() => setHover(false)}>
11        <CheckIcon
12          stroke={isHovered ? 'white' : myTheme.colors.mainColors.primary} />
13        <span css={{marginLeft: '5px'}}>Custom Button</span>
14      </Button>
15}
16
17
18function App() {
19  return <CustomCheckedButton {...someProps} />
20}