Button

Edit on GitHub
import { Button, LinkButton } from 'design-system/button';

Button

There are three button weights to choose from:

  • primary
  • secondary
  • none

and three sizes...

  • small
  • medium
  • large

Icons

Buttons can include icons on the left or right sides.

Props

PropTypeDefault
iconAfterIconType
iconBeforeIconType
labelstring
onPress() => void
size?
small
,
medium
,
large
medium
weight
primary
,
secondary
,
none
primary

LinkButton

Shares the same styles as a Button, but works as an anchor link.

Props

PropTypeDefault
hrefurl string
iconAfterIconType
iconBeforeIconType
labelstring
size?
small
,
medium
,
large
medium
weight
primary
,
secondary
,
none
primary

IconButton

A small circular button for when only an icon will do. Typically to trigger an immediate action like creating an item or toggling a theme.

Props

PropTypeDefault
iconIconType
labelstring
onPress() => void
size?
small
,
medium
,
large
medium
weight
primary
,
secondary
,
none
primary

  • Home
  • About
  • Blog
  • Design System
© Copyright 2021 Nathan Simpson. Made in Sydney Australia.