Buttons

The <button> element is an interactive element activated by a user with a mouse, keyboard, finger and more. Once activated, it performs an action, such as submitting a form or opening a dialog.

Import

import { Button } from "@cider-ui/cider-ui";

Usage

  <Button label="Button" />

Sizes

  <Button label="small" label="small" />
  <Button label="medium" label="medium" />
  <Button label="large" label="large" />

Variants

  <Button filled style="primary" label="primary" />
  <Button filled style="secondary" label="secondary" />

Styles

  <Button style="primary" label="primary" />
  <Button style="secondary" label="secondary" />

With icons

  <Button label="Send" rightIcon={<PaperAirplaneIcon />} />
  <Button label="Subscribe" leftIcon={<BellAlterIcon />} />

The <PaperAirplainIcon /> ans <BellAlterIcon /> are available from HeroIcons