Button

A flexible, accessible button component built on Base UI. It supports multiple visual variants such as primary, secondary, outline, and icon. Designed to be consistent, composable, and easy to theme across the application.

npx shadcn@latest add @rokkit200-ui/button

Preview

Lorem Ipsum

Code

import { Button } from "@/registry/rokkit200-ui/components/button/button";

export default function ButtonDefaultDemo() {
    return <Button>Lorem Ipsum</Button>;
}

Examples

Primary

Preview

Lorem Ipsum

Code

import { Button } from "@/registry/rokkit200-ui/components/button/button";

export default function ButtonPrimaryDemo() {
  return <Button variant={"primary"}>Lorem Ipsum</Button>;
}

Secondary

Preview

Lorem Ipsum

Code

import { Button } from "@/registry/rokkit200-ui/components/button/button";

export default function ButtonSecondaryDemo() {
    return <Button variant={"secondary"}>Lorem Ipsum</Button>;
}

Outline

Preview

Lorem Ipsum

Code

import { Button } from "@/registry/rokkit200-ui/components/button/button";

export default function ButtonOutlineDemo() {
    return <Button variant={"outline"}>Lorem Ipsum</Button>;
}

Disabled

Preview

Lorem Ipsum

Code

import { Button } from "@/registry/rokkit200-ui/components/button/button";

export default function ButtonDisabledDemo() {
    return <Button disabled>Lorem Ipsum</Button>;
}

Icon

Preview

Code

import { Button } from "@/registry/rokkit200-ui/components/button/button";
import { Icon } from "@/registry/rokkit200-ui/components/icon/icon";

export default function ButtonIconDemo() {
    return (
        <Button variant={"primary"} kind={"icon"}>
            <Icon iconPath="svg/icons/home_icon" height={20} width={20} />
        </Button>
    );
}

Usage

Below is an example of how to use the Button in your site.

import { Button } from "@/rokkit200-ui/components/button/button";

<Button>
    Lorem Ipsum
</Button>

API Reference

Prop	Type	Default	Description
children	React.ReactNode	—	Button content — typically label text and/or icons.
variant	"primary" | "secondary" | "outline"	"primary"	Visual style variant. Shares token system with Link.
kind	"default" | "icon"	"default"	Shape/content mode. Use "icon" for icon-only buttons (renders rounded-full).
disabled	boolean	false	Prevents interaction. Renders aria-disabled and suppresses pointer events.
className	string	undefined	Additional CSS classes applied to the root element.
type	"button" | "submit" | "reset"	undefined	Standard HTML button type attribute.

Disabled State

• aria-disabled is automatically applied by Base UI
• Pointer events are suppressed via pointer-events-none
• Visual styling reflects reduced interactivity via aria-disabled:opacity-25

Related

• Link — shared variant system and visual language
• Icon — used within icon-only button variants