Button

Buttons make common actions more obvious to the user. They use labels and sometimes icons to communicate the action that occurs after interaction. To use, import from @marvelapp/ui:

import { Button } from '@marvelapp/ui';

Kind

The <Button /> component has a few kinds available that can be used depending on the context of the action being performed.

<Button kind="ghost">
  Click
</Button>
<Button kind="green">
  Click
</Button>
<Button kind="marvel">
  Click
</Button>
<Button kind="danger">
  Click
</Button>
<Button kind="ghostDanger">
  Click
</Button>

Size

The <Button /> component has a few sizes available that can be used depending where in the page hierarchy they sit.

<Button size={3}>
  Click
</Button>
<Button size={2}>
  Click
</Button>
<Button size={1}>
  Click
</Button>
<Button size={0}>
  Click
</Button>

You can also define a custom size for a specific edge case – a marketing website page that requires bigger CTAs, or an standalone page within the product.

<Button
  kind="green"
  borderRadius={40}
  fontSize={5}
  height={80}
  lineHeight="80px"
  px={60}
>
  Click
</Button>

Props