Button

Triggers an action or event when the user clicks on it. Buttons are a primary way for users to interact with the application and can contain text, an icon, or both.

Basic Usage

Default button styles and variants.

BasicUsage.tsx

<Row flexWrap>
  <Button default>Button default</Button>
  <Button accent>Button accent</Button>
  <Button primary>Button primary</Button>
  <Button secondary>Button secondary</Button>
  <Button tertiary>Button tertiary</Button>
  <Button success>Button success</Button>
  <Button danger>Button danger</Button>
  <Button warning>Button warning</Button>
  <Button info>Button info</Button>
  <Button link>Button link</Button>
</Row>

Sizes

Buttons come in different sizes - xs, sm, md, lg, xl.

Sizes.tsx

<Row flexWrap>
  <Button xs>Button xs</Button>
  <Button sm>Button sm</Button>
  <Button md>Button md</Button>
  <Button lg>Button lg</Button>
  <Button xl>Button xl</Button>
</Row>

Sizes with Icon

Buttons come in different sizes such as xs, sm, md, lg, xl.

SizeswithIcon.tsx

<Row flexWrap>
  <Button xs>
    <span className="rounded-full size-4 bg-gray-300" />
     Extra Small
  </Button>
  <Button sm>
    <span className="rounded-full size-4.5 bg-gray-300" />
     Small
  </Button>
  <Button md>
    <span className="rounded-full size-5 bg-gray-300" />
     Medium
  </Button>
  <Button lg>
    <span className="rounded-full size-6 bg-gray-300" />
     Large
  </Button>
  <Button xl>
    <span className="rounded-full size-7 bg-gray-300" />
     Extra Large
  </Button>
</Row>

Font Weights

Buttons support different font weights.

FontWeights.tsx

<Row flexWrap>
  <Button thin>Button thin</Button>
  <Button extralight>Button extralight</Button>
  <Button light>Button light</Button>
  <Button normal>Button normal</Button>
  <Button medium>Button medium</Button>
  <Button semibold>Button semibold</Button>
  <Button bold>Button bold</Button>
  <Button extrabold>Button extrabold</Button>
  <Button black>Button black</Button>
</Row>

Border Radius Options

Button supports three border radius styles: rounded (default), pill, and sharp.

BorderRadiusOptions.tsx

<Row flexWrap>
  <Button pill>Button pill</Button>
  <Button sharp>Button sharp</Button>
  <Button rounded>Button rounded</Button>
</Row>

Button Styles

Buttons can be styled as outline (default) or filled.

ButtonStyles.tsx

<Col>
  <Row flexWrap>
    <Button default filled>filled default</Button>
    <Button accent filled>filled accent</Button>
    <Button filled primary>filled primary</Button>
    <Button filled secondary>filled secondary</Button>
  </Row>
  <Row flexWrap>
    <Button default outline>outline default</Button>
    <Button accent outline>outline accent</Button>
    <Button outline primary>outline primary</Button>
    <Button outline secondary>outline secondary</Button>
  </Row>
</Col>