Mokri

Preview

Installation

<> import.ts

import { Button } from "@/components/ui/button"

Code

<> component.tsx

import { Button } from "@/components/ui/button"

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button size="sm">Small</Button>

API Reference

Button

Displays a button or a component that looks like a button.

<> import.ts

import { Button } from "@/components/ui/button"

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content to display inside the button
`onClick`	`() => void`	—	Click handler for the button
`className`	`string`	`""`	Additional CSS classes
`bg`	`boolean`	`true`	Whether to show background color
`outline`	`boolean`	`false`	Whether to show outline style
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the button
`disabled`	`boolean`	`false`	Whether the button is disabled

Examples

Example 1

<> example.tsx

// Basic button
<Button>Click me</Button>

Example 2

<> example.tsx

// Different sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Example 3

<> example.tsx

// Outline button
<Button outline={true}>Outline</Button>

Example 4

<> example.tsx

// Button without background
<Button bg={false}>No Background</Button>

Example 5

<> example.tsx

// Disabled button
<Button disabled={true}>Disabled</Button>