Button

Interactive

See Button in Storybook for every variant, with live controls.

The primary action control. One primary button per view — everything else is secondary or ghost.

import { Button } from "@kairosis/eidos";

<Button icon="plus" onClick={createProject}>
  Create project
</Button>;

Props

Prop	Type	Default	Description
variant	"primary" | "secondary" | "ghost" | "danger"	"primary"	Visual style
size	"sm" | "md" | "lg"	"md"	Control height: 28 / 36 / 44px
icon	IconName	—	Leading Lucide icon, kebab-case
disabled	boolean	false
children	ReactNode	—	Label

Also accepts every <button> attribute (onClick, form, aria-*). type defaults to "button", so a Button inside a form won't submit it unless you say so. Forwards a ref to the underlying <button>.

Guidelines

• Sentence case: "Create project", not "Create Project".
• danger is for destructive actions only, and usually pairs with a confirmation Dialog.
• ghost is for tertiary actions that shouldn't compete — table row actions, "Skip".
• Press feedback is colour only; Eidos never uses scale transforms.