Button

Documentation of the <Button /> component. Learn how to use it and its available props.

Installation#

To get started, install @exponentialeducation/betomic via yarn:

# Yarn
yarn add @exponentialeducation/betomic

Use of Button#

Button is used by users to trigger action and operations when clicked.

import { Button } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Button>
        Click me!
      </Button>

      {/* ... */}
    </main>
  )
}

The previous example describes the simplest way of using the Button component, it uses default props and renders a button like the following:

Click me!

Sizes & variants#

Betomic comes with three different sizes as well as variants for buttons.
Primary and secondary button variants indicate main and secondary actions respectivelly.
Tertiary variant also handles dark mode. Disabled buttons are non-interactive.

Small#

Medium#

Large#

Some examples of button sizes, variants and props:

import { Button } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Button size="sm" variant="primary">
        Small primary button
      </Button>

      <Button variant="secondary">
        Secondary button
      </Button>

      <Button variant="tertiary" disabled>
        Tertiary button disabled
      </Button>

      {/* ... */}
    </main>
  )
}

Wrapping styles#

Buttons handle two different wrapping styles, also known as constraints: Fill container and Hug contents.

Hug contents#

Hug contents constraint keeps the size of the button bounded to its content. It means that the button will adapt its size according to the elements that it holds.

Fill container#

Fill container constraint resizes the button to fill the width of its direct container.

Icon#

Icon style adjusts button paddings to keep a 1:1 square aspect ratio.

Loading#

Icon style adjusts button paddings to keep a 1:1 square aspect ratio.

Some examples of button wrapping styles and props:

import { Button } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Button>
        Hug contents button
      </Button>

      <Button block className="justify-between">
        Fill container button <ArrowRightIcon />
      </Button>

      <Button icon size="lg">
        <ArrowRightIcon />
      </Button>

       <Button icon loading>
        <ArrowRightIcon />
      </Button>

      {/* ... */}
    </main>
  )
}

Props#

Extends ButtonHTMLAttributesprops