Button

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

Usage

import { Button } from '@workspace/ui/components/Button'

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

Examples

Outline

import { Button } from '@workspace/ui/components/Button'

export function ButtonOutline() {
    return <Button variant="outline">Save changes</Button>
}

Destructive

import { Button } from '@workspace/ui/components/Button'

export function ButtonDestructive() {
    return <Button variant="destructive">Save changes</Button>
}

Ghost

import { Button } from '@workspace/ui/components/Button'

export function ButtonGhost() {
    return <Button variant="ghost">Save changes</Button>
}

Icon

import { Button } from '@workspace/ui/components/Button'
import { Trash } from 'lucide-react'

export function ButtonIcon() {
    return (
        <Button size="icon" variant="ghost">
            <Trash />
        </Button>
    )
}

With Icon

import { Button } from '@workspace/ui/components/Button'
import { Plus } from 'lucide-react'

export function ButtonWithIcon() {
    return (
        <Button>
            <Plus />
            Add
        </Button>
    )
}
import { Button } from '@workspace/ui/components/Button'
import { SquareArrowOutUpRight } from 'lucide-react'
import Link from 'next/link'

export function ButtonAsALink() {
    return (
        <Button variant={'default'} asChild>
            <Link href="https://react-spectrum.adobe.com/react-aria/index.html" target="_blank">
                React Aria Components
                <SquareArrowOutUpRight />
            </Link>
        </Button>
    )
}

Loading

import { Button } from '@workspace/ui/components/Button'
import { Spinner } from '@workspace/ui/components/Spinner'

export function ButtonLoading() {
    return (
        <Button isDisabled>
            <Spinner />
            Please wait
        </Button>
    )
}