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;
}