Button

Four button variants for the dominant action on a screen and supporting actions around it.

Variants

Buttons are separate exports per variant. Pick the dominant one per screen — at most one PrimaryButton, plus supporting Secondary / Tertiary / Quaternary as needed.

import {
  Flex,
  PrimaryButton,
  QuaternaryButton,
  SecondaryButton,
  TertiaryButton,
  Toast,
} from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function ButtonVariantsPreview() {
  return (
    <PreviewLayout>
      <Flex vertical gap={12}>
        <PrimaryButton text="Primary" onClick={() => Toast.info("Primary")} />
        <SecondaryButton
          text="Secondary"
          onClick={() => Toast.info("Secondary")}
        />
        <TertiaryButton text="Tertiary" onClick={() => Toast.info("Tertiary")} />
        <QuaternaryButton
          text="Quaternary"
          onClick={() => Toast.info("Quaternary")}
        />
      </Flex>
    </PreviewLayout>
  )
}

As a link

Pass href and the button renders inside <UIKitLink> — that resolves to next/link when wrapped in <NextUIKitProvider>, a plain <a> otherwise. replace controls history vs push.

import { Flex, PrimaryButton, SecondaryButton } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function ButtonLinkPreview() {
  return (
    <PreviewLayout>
      <Flex vertical gap={12}>
        <PrimaryButton text="Open checkout" href="/checkout" />
        <SecondaryButton text="View terms" href="/terms" replace />
      </Flex>
    </PreviewLayout>
  )
}

Disabled

Pass disabled — forwarded straight to Arco.

import {
  Flex,
  PrimaryButton,
  QuaternaryButton,
  SecondaryButton,
  TertiaryButton,
} from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function ButtonDisabledPreview() {
  return (
    <PreviewLayout>
      <Flex vertical gap={12}>
        <PrimaryButton text="Disabled primary" disabled />
        <SecondaryButton text="Disabled secondary" disabled />
        <TertiaryButton text="Disabled tertiary" disabled />
        <QuaternaryButton text="Disabled quaternary" disabled />
      </Flex>
    </PreviewLayout>
  )
}

Loading

Pass loading and the label is swapped for a spinner. Use during async actions to block double-submits.

import { Flex, PrimaryButton, SecondaryButton } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function ButtonLoadingPreview() {
  return (
    <PreviewLayout>
      <Flex vertical gap={12}>
        <PrimaryButton text="Saving…" loading />
        <SecondaryButton text="Loading…" loading />
      </Flex>
    </PreviewLayout>
  )
}

Installation

pnpm add @appboxo/ui-kit

Theme tokens

--button-primary-*, --button-default-*, --button-ghost-* (Arco-managed) plus --tertiary-button-* and --quaternary-button-* (kit-only).

LayoutLoading Input

On This Page

Variants As a link Disabled Loading Installation Theme tokens

Build mini-apps with Boxo

Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.