Button

Buttons are used to trigger actions.

'use client'
import { Button } from '@nerdfish/ui'
export function ButtonExample() {
return <Button>Button</Button>
}

Usage

import { Button } from '@nerdfish/ui'
<Button variant="outline">Button</Button>

Examples

Default

'use client'
import { Button } from '@nerdfish/ui'
export function ButtonExample() {
return <Button>Button</Button>
}

Variants

'use client'
import { Button } from '@nerdfish/ui'
export function ButtonVariantsExample() {
return (
<div className="space-x-sm flex">
<Button variant="default">Default</Button>
<Button variant="accent">Nerdfish</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger" onClick={() => {}}>
Danger
</Button>
<Button variant="success">Success</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>
<Button variant="accentuate">Accentuate</Button>
<Button variant="link">Link</Button>
</div>
)
}

Disabled

'use client'
import { Button } from '@nerdfish/ui'
export function ButtonDisabledExample() {
return (
<div className="space-x-sm flex">
<Button disabled variant="default">
Default
</Button>
<Button disabled variant="accent">
Nerdfish
</Button>
<Button disabled variant="secondary">
Secondary
</Button>
<Button disabled variant="danger">
Danger
</Button>
<Button disabled variant="success">
Success
</Button>
<Button disabled variant="ghost">
Ghost
</Button>
<Button disabled variant="outline">
Outline
</Button>
<Button disabled variant="link">
Link
</Button>
</div>
)
}

Sizes

'use client'
import { Button } from '@nerdfish/ui'
import { Mail } from 'lucide-react'
export function ButtonSizesExample() {
return (
<div className="space-x-sm flex items-center">
<Button variant="accent" size="default">
Default
</Button>
<Button variant="accent" size="sm">
Small
</Button>
<Button variant="accent" size="lg">
Large
</Button>
<Button variant="accent" size="xl">
Extra Large
</Button>
<Button variant="accent" size="icon">
<Mail className="size-4" />
<span className="sr-only">Mail</span>
</Button>
</div>
)
}

With Icon

'use client'
import { Button } from '@nerdfish/ui'
import { Mail } from 'lucide-react'
export function ButtonWithIconExample() {
return (
<Button>
<Mail className="mr-sm size-4" /> Login with Email
</Button>
)
}

Loading

'use client'
import { Button } from '@nerdfish/ui'
import { Loader2 } from 'lucide-react'
export function ButtonLoadingExample() {
return (
<Button disabled>
<Loader2 className="mr-sm size-4 animate-spin" />
Please wait
</Button>
)
}

Icon only

'use client'
import { Button } from '@nerdfish/ui'
import { Mail } from 'lucide-react'
export function ButtonIconOnlyExample() {
return (
<Button size="icon">
<Mail className="size-4" />
<span className="sr-only">Mail</span>
</Button>
)
}

As Child

'use client'
import { Button } from '@nerdfish/ui'
import Link from 'next/link'
export function ButtonAsChildExample() {
return (
<Button asChild>
<Link href="https://nerdfish.be">Nerdfish</Link>
</Button>
)
}

Button Group

Horizontal

Vertical

'use client'
import { Button, ButtonGroup, H3 } from '@nerdfish/ui'
export function ButtonGroupExample() {
return (
<div className="gap2 flex flex-col">
<H3>Horizontal</H3>
<ButtonGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</ButtonGroup>
<H3>Vertical</H3>
<ButtonGroup orientation="vertical">
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</ButtonGroup>
</div>
)
}

Button Group Use Case

'use client'
import {
Button,
ButtonGroup,
Description,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@nerdfish/ui'
import { ChevronDownIcon } from 'lucide-react'
import React from 'react'
const descriptionsMap = {
merge:
'All commits from the source branch are added to the destination branch via a merge commit.',
squash:
'All commits from the source branch are added to the destination branch as a single commit.',
rebase:
'All commits from the source branch are added to the destination branch individually.',
}
const labelsMap = {
merge: 'Create a merge commit',
squash: 'Squash and merge',
rebase: 'Rebase and merge',
}
export function ButtonGroupUseCase() {
const [selectedOption, setSelectedOption] =
React.useState<keyof typeof labelsMap>('merge')
return (
<ButtonGroup>
<Button>{labelsMap[selectedOption]}</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="icon">
<ChevronDownIcon className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-w-[300px]">
{Object.entries(labelsMap).map(([key, label]) => {
const option = key as keyof typeof labelsMap
return (
<DropdownMenuItem
onSelect={() => setSelectedOption(option)}
key={key}
>
<div className="gap-sm flex flex-col">
<span className="font-bold">{label}</span>
<Description>{descriptionsMap[option]}</Description>
</div>
</DropdownMenuItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
</ButtonGroup>
)
}