Skip to main content

​
Overview

The Button component is a flexible, accessible button with support for multiple variants, colors, sizes, and icons.

​
Basic Usage

  • Code
  • Preview
import { Button } from '@peppermint-design/devreadykit';

export default function App() {
  return (
    <Button onClick={() => console.log('Clicked!')}>
      Click me
    </Button>
  );
}

​
Variants

​
Filled (Default)

The default filled variant with solid background.
  • Code
  • Preview
ButtonVariants
import { Button } from '@peppermint-design/devreadykit';

export default function ButtonVariants() {
  return (
    <div className="flex gap-4 flex-wrap">
      <Button variant="filled" color="primary">
        Primary
      </Button>
      <Button variant="filled" color="secondary">
        Secondary
      </Button>
      <Button variant="filled" color="success">
        Success
      </Button>
      <Button variant="filled" color="warning">
        Warning
      </Button>
      <Button variant="filled" color="error">
        Error
      </Button>
    </div>
  );
}

​
Border

Button with border and transparent background.
  • Code
  • Preview
<Button variant="border" color="primary">
  Primary Border
</Button>
<Button variant="border" color="secondary">
  Secondary Border
</Button>

​
Plain

Minimal button with no background or border.
  • Code
  • Preview
<Button variant="plain" color="primary">
  Plain Primary
</Button>
<Button variant="plain" color="secondary">
  Plain Secondary
</Button>

​
Sizes

Buttons come in three sizes: small (s), medium (m), and large (l).
  • Code
  • Preview
<Button size="s">Small Button</Button>
<Button size="m">Medium Button</Button>
<Button size="l">Large Button</Button>

​
With Icons

Add icons to your buttons using the icon prop.
  • Code
  • Preview
    import { Circle } from "@/assets/icons/circle.tsx"

    <Button icon={<Circle />}>
        Button
    </Button>

​
Icon Only Buttons

Create icon-only buttons by omitting the children.
  • Code
  • Preview
    import { Eye } from "@/assets/icons/eye.tsx";
    import { EyeHide } from "@/assets/icons/eye-hide.tsx";

    <Button icon={<Eye />} />
    <Button icon={<EyeHide />} variant="border" color="secondary" />

​
Props

PropTypeDefaultDescription
variant"filled" | "border" | "plain""filled"Visual style variant
color"primary" | "secondary" | "error" | "success" | "warning""primary"Color theme
size"s" | "m" | "l""m"Button size
state"rest" | "hover" | "pressed" | "focus" | "disabled""rest"Button state
iconReact.ReactElement<React.SVGProps<SVGSVGElement>>—Icon element
selectedbooleanfalseSelected state
disabledbooleanfalseDisabled state
classNamestring""Additional CSS classes
⌘I