/

Button


Button is a component responsible for triggering actions or events, for instance, submitting Forms, opening Dialogs. We bundled few variants of Buttons, so it suites context, where it's being used.

Primary

This variant is suitable for triggering main events in your interface.

import { Button } from 'insites-ui'

<Button variant="primary">Submit now</Button>

Secondary

This variant is suitable for supporting character events such as cancelling the action or closing modals.

import { Button } from 'insites-ui'

<Button variant="secondary">Cancel</Button>

Pill

This variant adds some extra spice to the interface. We utilise it for example for navigation bars action.

import { Button } from 'insites-ui'

<Button variant="pill">Sign in</Button>

Blank

It's the button in its simplest form. It can be utilised as a not that important action in your interface. For example attachment upload.

import { Button } from 'insites-ui'

<Button variant="blank">Upload the PDF</Button>

Size variants

The button component has also a property for size variants.

import { Button } from 'insites-ui'

<Button variant="primary" size="huge">Submit now</Button>
<Button variant="primary">Submit now</Button>
<Button variant="primary" size="small">Submit now</Button>
Edit on GitHub