uiUI Kit

Button

Actions

Triggers an action or event. Supports variants, sizes, icons and a built-in loading state.

Live preview

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import
import { Button } from "@nphuonha/ui-kit";
import { PlusIcon } from "@phosphor-icons/react";

Usage

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage
import { Button } from "@nphuonha/ui-kit";


export function Actions() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="danger">Danger</Button>
    </div>
  );
}

Examples

Sizes and shapes

Use size to match density and shape to soften an action.

Sizes and shapes

API Reference

Props are additive to the underlying Base UI or native element.

PropTypeDefaultDescription
variant"primary" | "secondary" | "outline" | "ghost" | "soft" | "danger""primary"Visual emphasis of the button.
size"sm" | "default" | "lg" | "icon" | "icon-sm""default"Control height and padding.
shape"rounded" | "pill""rounded"Corner treatment.
loadingboolean—Shows a spinner and disables interaction.
startIconIconComponent—Icon rendered before the label.
endIconIconComponent—Icon rendered after the label.
disabledboolean—Disables the button.