Component · <button>

Button

The gel pill, the glass pill and everything in between.

Install

npx @lazizbekio/mitame add button

Usage

import { PlusIcon } from "@/components/mitame/icons/plus";
import { Button } from "@/components/mitame/ui/button";

export default function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary">Save</Button>
      <Button>Cancel</Button>
      <Button variant="ghost">Skip</Button>
      <Button variant="danger">Delete</Button>
      <Button size="sm">
        <PlusIcon /> New
      </Button>
    </div>
  );
}

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "ghost" \| "danger"`	`"secondary"`	Visual weight.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Height and padding. Touch screens always get a 44px tap area.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Defaults to button so it never submits a form by accident.
`...props`	`ButtonHTMLAttributes`	—	Anything a <button> takes.

Styling

Every part has a data-slot starting with button, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.