npm

@tdcerhverv/button
TypeScript icon, indicating that this package has built-in type declarations

3.7.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @tdcerhverv/button

Weekly Downloads

3

Version

3.7.1

License

Apache-2.0

Unpacked Size

148 kB

Total Files

36

Last publish

Collaborators

  • antongb
  • dev_jonas
  • jeppebenjaminsen
  • ahhah
  • abdok
  • mikkv
  • clausr1990
  • tdc-sigbe
  • mdige
  • nuudaybot
  • tdc-olila
  • jeroen.dk.nl
  • renand
  • stegr
  • m84100
  • m92212
  • m87979
  • vertic
  • rasladev
  • muddz
  • tajsonik
  • linnt
  • molg