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>
)
}
As A Link
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>
)
}