3.7.1 • Published 3 years ago
@tdcerhverv/button v3.7.1
Button component
Example of usage
Buttons are imported as named imports
import {
DefaultButton,
OutlineButton,
InvertedButton,
InvertedOutlineButton,
PositiveButton,
NegativeButton,
TextButton,
IconButton,
} from '@tdcerhverv/button';
Default
import { DefaultButton } from '@tdcerhverv/button';
render(<DefaultButton>Default Button</DefaultButton>);
Sizing
import { DefaultButton } from '@tdcerhverv/button';
render(<DefaultButton size="large">Large Button</DefaultButton>);
With Icon
import { DefaultButton } from '@tdcerhverv/button';
import Download from '@tdcerhverv/parrotfish/dist/icons/Icons/Download.svg';
render(<DefaultButton icon={Download}>Button with icon</DefaultButton>);
Icon Only
import { IconButton } from '@tdcerhverv/button';
import Settings from '@tdcerhverv/parrotfish/dist/icons/Icons/Settings.svg';
render(<IconButton icon={Settings} title={'Settings'} />);
Note: children is ignored and not rendered.
Props
Supports standard HTMLButtonElement
attributes and some more specific props.
Note: The type
property defaults to button
.
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
appearance:
| 'default'
| 'outline'
| 'text'
| 'positive'
| 'negative'
| 'inverted'
| 'invertedOutline'
| 'icon';
size?: 'small' | 'medium';
icon?: React.ComponentProps<typeof ButtonIcon>['icon'];
}
IconButton
supports sizes as numbers as well, including a third and larger size.
interface IconButtonProps extends ButtonProps {
size?: 'small' | 'medium' | 12 | 16 | 20;
}
Useful links
3.7.1
3 years ago
3.7.0
3 years ago
3.6.0
3 years ago
3.5.1
4 years ago
3.5.0
4 years ago
3.4.1
4 years ago
3.4.0
4 years ago
3.3.0
4 years ago
3.2.0
4 years ago
3.1.5
4 years ago
3.1.4
4 years ago
3.1.3
4 years ago
3.1.2
4 years ago
3.1.1
4 years ago
3.1.0
4 years ago
3.0.9
4 years ago
3.0.8
4 years ago
3.0.7
4 years ago
3.0.6
4 years ago
3.0.5
4 years ago
3.0.4
4 years ago
3.0.3
4 years ago
3.0.2
4 years ago
3.0.1
4 years ago
3.0.0
4 years ago
2.0.1
4 years ago
2.0.0
5 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.0
5 years ago