Documentation

Button

Displays a button or a component that looks like a button. Supports multiple visual variants, sizes, and icon placements.

Examples

Size
Icon
State
Variant
import { Button } from 'kalki-design'

<Button>Button</Button>

Do's and Don'ts

Do
  • Use one primary action per screen or section.
  • Use primary for the main call-to-action.
  • Use secondary for less prominent actions.
  • Use ghost for tertiary or toolbar actions.
Don't
  • Use primary for destructive actions — use destructive instead.
  • Place multiple primary buttons in the same area.
  • Use buttons for navigation — use the link variant instead.
  • Use an icon-only button without an aria-label.

Installation

npx kalki-design add button

Usage

import { Button } from 'kalki-design'

export default function Example() {
  return <Button>Click me</Button>
}

API Reference

NameTypeDefaultDescription
NamevariantType'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'Default'primary'DescriptionControls the visual style of the button.
NamesizeType'sm' | 'md' | 'lg' | 'icon'Default'md'DescriptionControls the size of the button. Use "icon" for square icon-only buttons.
NameiconLeftTypeReactNodeDefault—DescriptionIcon or element rendered to the left of the label.
NameiconRightTypeReactNodeDefault—DescriptionIcon or element rendered to the right of the label.
NamefullWidthTypebooleanDefaultfalseDescriptionStretches the button to fill its container width.
NamedisabledTypebooleanDefaultfalseDescriptionPrevents interaction and applies muted styling.
NamechildrenTypeReactNodeDefault—DescriptionContent rendered inside the button.
NameclassNameTypestringDefault—DescriptionAdditional CSS classes merged with the component styles.