Components
button

Button

Clickable button for actions and triggers.

Demo

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


export const ButtonDemo = () => {
  return (
    <div className="flex items-center gap-4 justify-center flex-wrap">
      <Button>
        Click Me
      </Button>
      <Button variant="outline">
        Click Me
      </Button>
      <Button variant="soft">
        Click Me
      </Button>
    </div>
  )
}

Installation

terminal

npx shadcn@latest add @jk-ui/button

Button Principles

In jk-ui, a button appearance is defined by two core dimensions: variant and intent. This separation ensures visual consistency, clear action hierarchy, and full themeability.

Variant controls the visual treatment of the button, while intent communicates the meaning of the action. If you want to customize the variant, take a look at the button utilities page.

Sizes

import { Button } from '@/components/jk/button'

export const ButtonSizes = () => {
    return (
        <div className="flex flex-wrap items-center gap-2">
            <Button size="xs">
                Click me
            </Button>
            <Button size="sm">
                Click me
            </Button>
            <Button size="md">
                Click me
            </Button>
            <Button size="lg">
                Click me
            </Button>
            <Button size="xl">
                Click me
            </Button>
        </div>
    )
}

Icons

import { Button } from '@/components/jk/button'

export const ButtonIcons = () => {
    return (
        <div className="flex flex-wrap items-center gap-2">
            <Button size="xs" iconOnly>
                <span aria-hidden="true" className="flex iconify ph--atom"></span>
            </Button>
            <Button size="sm" iconOnly>
                <span aria-hidden="true" className="flex iconify ph--atom"></span>
            </Button>
            <Button size="md" iconOnly>
                <span aria-hidden="true" className="flex iconify ph--atom"></span>
            </Button>
            <Button size="lg" iconOnly>
                <span aria-hidden="true" className="flex iconify ph--atom"></span>
            </Button>
            <Button size="xl" iconOnly>
                <span aria-hidden="true" className="flex iconify ph--atom"></span>
            </Button>
        </div>
    )
}

Examples

With icon

import { Button } from '@/components/jk/button'

export const ButtonWithIcons = () => {
    return (
        <div className="flex flex-wrap items-center gap-2">
            <Button aria-label="Default button" className='gap-1.5'>
                <span aria-hidden="true" className="flex iconify ph--atom"></span>
                <span>leading</span>
            </Button>
            <Button aria-label="Default button" className='gap-1.5'>
                <span>trailing</span>
                <span aria-hidden="true" className="flex iconify ph--atom"></span>
            </Button>
        </div>
    )
}

All Variants and intents

Primary

Secondry

Warning

Success

Danger

Gray

Neutral

White

Solid

Outline

Soft

Ghost

Click me-

Click me-Click me-Click me-

Click me-Click me-