Enterprise UI Kit

Button

Primary, secondary, danger and outline variants.

How to use

Import the Button component and use it with optional variant. Copy the examples below.

1. Import

tsx

import { Button } from "@/app/components/ui";

2. Basic usage

tsx

export function Example() {
  return <Button>Primary</Button>;
}

3. Variants

Button variantstsx

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>
<Button variant="primary-outline">Primary outline</Button>
<Button variant="secondary-outline">Secondary outline</Button>
<Button variant="danger-outline">Danger outline</Button>

Button Group

Segmented button group with primary, secondary, danger and outline variants.

Secondary

primary

secondary

danger

primary outline

secondary outline

danger outline

How to use

Import ButtonGroup and pass options, value, and onChange. Copy the examples below.

1. Import

tsx

import { ButtonGroup } from "@/app/components/ui";

2. Basic usage

tsx

const options = [
  { value: "left", label: "Left" },
  { value: "center", label: "Center" },
  { value: "right", label: "Right" },
];

<ButtonGroup
  options={options}
  value={value}
  onChange={setValue}
  variant="secondary"
/>

3. All variants

ButtonGroup variantstsx

// Primary
<ButtonGroup options={options} value={value} onChange={setValue} variant="primary" />
// Secondary
<ButtonGroup options={options} value={value} onChange={setValue} variant="secondary" />
// Danger
<ButtonGroup options={options} value={value} onChange={setValue} variant="danger" />
// Primary outline
<ButtonGroup options={options} value={value} onChange={setValue} variant="primary-outline" />
// Secondary outline
<ButtonGroup options={options} value={value} onChange={setValue} variant="secondary-outline" />
// Danger outline
<ButtonGroup options={options} value={value} onChange={setValue} variant="danger-outline" />

ToggleButton

How to use

Import ToggleButton. Pass pressed and onPressedChange. Copy the examples below.

1. Import

tsx

import { ToggleButton } from "@/app/components/ui";

2. Basic usage

tsx

<ToggleButton
  pressed={pressed}
  onPressedChange={setPressed}
/>

Link

Home Dashboard (underline)

How to use

Import Link and use href with optional underline. Copy the examples below.

1. Import

tsx

import { Link } from "@/app/components/ui";

2. Basic usage

tsx

<Link href="/">Home</Link>
<Link href="/dashboard" underline>Dashboard (underline)</Link>

IconButton & IconBox

How to use

Use IconButton for actionable icons and IconBox for display. Copy the examples below.

1. Import

tsx

import { IconButton, IconBox } from "@/app/components/ui";
import { Settings, Inbox } from "lucide-react";

2. Basic usage

tsx

<IconButton icon={<Settings className="w-5 h-5" />} aria-label="Settings" />

<IconBox icon={<Inbox className="w-5 h-5" />} size="sm" />
<IconBox icon={<Inbox className="w-5 h-5" />} rounded="full" />