/
index.tsx
37 lines (32 loc) · 1.04 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import styled, { DefaultTheme } from 'styled-components';
import { ThemeMixinProps } from '../../theme';
import { StyledComponentProps } from '../../utils';
interface _ButtonProps extends ThemeMixinProps {
disabled?: boolean;
isFullWidth?: boolean;
variant?: keyof DefaultTheme['components']['Button']['variants'];
type?: 'button' | 'reset' | 'submit';
}
export type ButtonProps = StyledComponentProps<typeof Button>;
/** A simple button component with basic default styles. */
export const Button = styled.button<_ButtonProps>`
align-items: center;
appearance: none;
background-color: transparent;
border-width: 0;
display: inline-flex;
justify-content: center;
outline: none;
position: relative;
text-decoration: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
width: ${p => (p.isFullWidth ? '100%' : 'auto')};
a& {
color: inherit;
}
${p => p.theme.components?.Button.baseStyle ?? ''};
${p => p.variant && p.theme.components?.Button.variants[p.variant]};
${p => p.theme.mixins.themeMixin};
`;