Button

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

Basic

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button>Button</Button>
}

asChild

Link

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return (
        <Button asChild>
            <a href="#">Link</a>
        </Button>
    )
}

Variants

The appearance can be toggled by specifying the variants attribute.

Primary

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button variant="primary">Primary</Button>
}

Secondary

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button variant="secondary">Secondary</Button>
}

Destructive

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button variant="destructive">Destructive</Button>
}

Outline

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button variant="outline">Outline</Button>
}

Ghost

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button variant="ghost">Ghost</Button>
}

Link

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button variant="link">Link</Button>
}

Size

The size can be toggled by specifying the size attribute.

Small

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button size="sm">Small</Button>
}

Large

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button size="lg">Large</Button>
}

Icon

COPY
import { ArrowBigDownDash } from 'lucide-react'
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return (
        <Button size="icon">
            <ArrowBigDownDash />
        </Button>
    )
}

Disabled

Basic

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button disabled>Button</Button>
}

State

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    const [disabled, setDisabled] = useState(true)

    return <Button disabled={disabled}>Button</Button>
}

Interval

Click and hold to repeat the clicking action.

Basic

The time to repeat for the interval attribute is in milliseconds.

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return <Button
        interval={100}
        onClick={() => {
            console.log('Clicked!')
        }}
    >Interval output log</Button>
}

Long Press

Any callback can be invoked when the button is pressed and held.

Basic

The long press time is set numerically in the delay attribute,callback sets the function object to delayFn.

COPY
import { Button } from '@kotsutsumi/viz-ui'

export function ButtonDemo() {
    return (
        <Button
            delay={1000}
            delayFn={() => {
                console.log('Long Pressed!')
            }}
        >
            Long Press Me!
        </Button>
    )
}

Attributes

Props	Default	Type
`variants`	`'default'`	`'default' \| 'primary' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'`