Buttons

Button

Buttons play a crucial role in functionality, whether for submitting a form or navigating to another page.

Basic

A button allows users to perform actions through clicks, presses, taps, or keystrokes.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Manual installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

import { Button } from "@/components/ui/button"
import { IconSettings } from "@intentui/icons"

<>
  <Button intent="primary">Primary</Button>
  <Button intent="secondary">Secondary</Button>
  <Button intent="warning">Warning</Button>
  <Button intent="danger">Danger</Button>
  <Button intent="outline">Outline</Button>
  <Button intent="plain">Plain</Button>

  <Button size="xs">Extra small</Button>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>

  <Button size="sq-xs"><IconSettings/></Button>
  <Button size="sq-sm"><IconSettings/></Button>
  <Button size="sq-md"><IconSettings/></Button>
  <Button size="sq-lg"><IconSettings/></Button>
</>

Intent

Buttons come in different intents, each with its own color scheme.

Shape

Buttons support various shapes to fit different design needs.

Size

Buttons are available in multiple sizes.

With icon

You can add icons to buttons, and their color will match the button's color.

Disabled

A disabled button cannot be interacted with and is visually styled to reflect its state.

Pending

A button can indicate a pending state using the isPending prop. This provides feedback for actions that take time, communicates the status to assistive technologies, and disables interactions except for focus.

With loader

You can add a loader to indicate ongoing processes.

Link

Sometimes, you need to use styles from buttons for links. Just use the link and use the buttonStyles to the className prop.

Choicebox

Touch hitbox

Sometimes you may want to use this button with only an icon. In that case, you can apply the touch-hitbox utility class on the sq-* size to increase the button’s hitbox for improved accessibility.

@utility touch-hitbox {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}