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

• Zeroheight