mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-02-09 02:49:29 +08:00
734 lines
21 KiB
TypeScript
734 lines
21 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/radix/components/example"
|
|
import { Button } from "@/registry/bases/radix/ui/button"
|
|
import {
|
|
ButtonGroup,
|
|
ButtonGroupText,
|
|
} from "@/registry/bases/radix/ui/button-group"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/registry/bases/radix/ui/dropdown-menu"
|
|
import { Field, FieldGroup } from "@/registry/bases/radix/ui/field"
|
|
import { Input } from "@/registry/bases/radix/ui/input"
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
} from "@/registry/bases/radix/ui/input-group"
|
|
import { Label } from "@/registry/bases/radix/ui/label"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/registry/bases/radix/ui/select"
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/registry/bases/radix/ui/tooltip"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function ButtonGroupExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<ButtonGroupBasic />
|
|
<ButtonGroupWithInput />
|
|
<ButtonGroupWithText />
|
|
<ButtonGroupWithDropdown />
|
|
<ButtonGroupWithSelect />
|
|
<ButtonGroupWithIcons />
|
|
<ButtonGroupWithInputGroup />
|
|
<ButtonGroupWithFields />
|
|
<ButtonGroupWithLike />
|
|
<ButtonGroupWithSelectAndInput />
|
|
<ButtonGroupNested />
|
|
<ButtonGroupPagination />
|
|
<ButtonGroupPaginationSplit />
|
|
<ButtonGroupNavigation />
|
|
<ButtonGroupTextAlignment />
|
|
<ButtonGroupVertical />
|
|
<ButtonGroupVerticalNested />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupBasic() {
|
|
return (
|
|
<Example title="Basic">
|
|
<div className="flex flex-col gap-4">
|
|
<ButtonGroup>
|
|
<Button variant="outline">Button</Button>
|
|
<Button variant="outline">Another Button</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupWithInput() {
|
|
return (
|
|
<Example title="With Input">
|
|
<div className="flex flex-col gap-4">
|
|
<ButtonGroup>
|
|
<Button variant="outline">Button</Button>
|
|
<Input placeholder="Type something here..." />
|
|
</ButtonGroup>
|
|
<ButtonGroup>
|
|
<Input placeholder="Type something here..." />
|
|
<Button variant="outline">Button</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupWithText() {
|
|
return (
|
|
<Example title="With Text">
|
|
<div className="flex flex-col gap-4">
|
|
<ButtonGroup>
|
|
<ButtonGroupText>Text</ButtonGroupText>
|
|
<Button variant="outline">Another Button</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup>
|
|
<ButtonGroupText asChild>
|
|
<Label htmlFor="input-text">GPU Size</Label>
|
|
</ButtonGroupText>
|
|
<Input id="input-text" placeholder="Type something here..." />
|
|
</ButtonGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupWithDropdown() {
|
|
return (
|
|
<Example title="With Dropdown">
|
|
<div className="flex flex-col gap-4">
|
|
<ButtonGroup>
|
|
<Button variant="outline">Update</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="ChevronDownIcon"
|
|
tabler="IconChevronDown"
|
|
hugeicons="ArrowDown01Icon"
|
|
phosphor="CaretDownIcon"
|
|
remixicon="RiArrowDownSLine"
|
|
/>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem>Disable</DropdownMenuItem>
|
|
<DropdownMenuItem variant="destructive">
|
|
Uninstall
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</ButtonGroup>
|
|
<ButtonGroup>
|
|
<Button variant="outline">Follow</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="ChevronDownIcon"
|
|
tabler="IconChevronDown"
|
|
hugeicons="ArrowDown01Icon"
|
|
phosphor="CaretDownIcon"
|
|
remixicon="RiArrowDownSLine"
|
|
/>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-50">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="VolumeOffIcon"
|
|
tabler="IconVolume"
|
|
hugeicons="VolumeOffIcon"
|
|
phosphor="SpeakerSlashIcon"
|
|
remixicon="RiVolumeMuteLine"
|
|
/>
|
|
Mute Conversation
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="CheckIcon"
|
|
tabler="IconCheck"
|
|
hugeicons="Tick02Icon"
|
|
phosphor="CheckIcon"
|
|
remixicon="RiCheckLine"
|
|
/>
|
|
Mark as Read
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="AlertTriangleIcon"
|
|
tabler="IconAlertTriangle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
Report Conversation
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="UserRoundXIcon"
|
|
tabler="IconUserX"
|
|
hugeicons="UserRemove01Icon"
|
|
phosphor="UserMinusIcon"
|
|
remixicon="RiUserUnfollowLine"
|
|
/>
|
|
Block User
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="ShareIcon"
|
|
tabler="IconShare"
|
|
hugeicons="Share03Icon"
|
|
phosphor="ShareIcon"
|
|
remixicon="RiShareLine"
|
|
/>
|
|
Share Conversation
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="CopyIcon"
|
|
tabler="IconCopy"
|
|
hugeicons="Copy01Icon"
|
|
phosphor="CopyIcon"
|
|
remixicon="RiFileCopyLine"
|
|
/>
|
|
Copy Conversation
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="TrashIcon"
|
|
tabler="IconTrash"
|
|
hugeicons="Delete02Icon"
|
|
phosphor="TrashIcon"
|
|
remixicon="RiDeleteBinLine"
|
|
/>
|
|
Delete Conversation
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupWithSelect() {
|
|
const [currency, setCurrency] = useState("$")
|
|
|
|
return (
|
|
<Example title="With Select">
|
|
<Field>
|
|
<Label htmlFor="amount">Amount</Label>
|
|
<ButtonGroup>
|
|
<Select value={currency} onValueChange={setCurrency}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent align="start">
|
|
<SelectGroup>
|
|
<SelectItem value="$">$</SelectItem>
|
|
<SelectItem value="€">€</SelectItem>
|
|
<SelectItem value="£">£</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Input placeholder="Enter amount to send" />
|
|
<Button variant="outline">
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight01Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Field>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupWithIcons() {
|
|
return (
|
|
<Example title="With Icons">
|
|
<div className="flex flex-col gap-4">
|
|
<ButtonGroup>
|
|
<Button variant="outline">
|
|
<IconPlaceholder
|
|
lucide="FlipHorizontalIcon"
|
|
tabler="IconFlipHorizontal"
|
|
hugeicons="FlipHorizontalIcon"
|
|
phosphor="ArrowsHorizontalIcon"
|
|
remixicon="RiArrowLeftRightLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline">
|
|
<IconPlaceholder
|
|
lucide="FlipVerticalIcon"
|
|
tabler="IconFlipVertical"
|
|
hugeicons="FlipVerticalIcon"
|
|
phosphor="ArrowsVerticalIcon"
|
|
remixicon="RiArrowUpDownLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline">
|
|
<IconPlaceholder
|
|
lucide="RotateCwIcon"
|
|
tabler="IconRotateClockwise2"
|
|
hugeicons="Rotate01Icon"
|
|
phosphor="ArrowClockwiseIcon"
|
|
remixicon="RiRefreshLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupWithInputGroup() {
|
|
return (
|
|
<Example title="With Input Group">
|
|
<div className="flex flex-col gap-4">
|
|
<InputGroup>
|
|
<InputGroupInput placeholder="Type to search..." />
|
|
<InputGroupAddon
|
|
align="inline-start"
|
|
className="text-muted-foreground"
|
|
>
|
|
<IconPlaceholder
|
|
lucide="SearchIcon"
|
|
tabler="IconSearch"
|
|
hugeicons="Search01Icon"
|
|
phosphor="MagnifyingGlassIcon"
|
|
remixicon="RiSearchLine"
|
|
/>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupWithFields() {
|
|
return (
|
|
<Example title="With Fields">
|
|
<FieldGroup className="grid grid-cols-3 gap-4">
|
|
<Field className="col-span-2">
|
|
<Label htmlFor="width">Width</Label>
|
|
<ButtonGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="width" />
|
|
<InputGroupAddon className="text-muted-foreground">
|
|
W
|
|
</InputGroupAddon>
|
|
<InputGroupAddon
|
|
align="inline-end"
|
|
className="text-muted-foreground"
|
|
>
|
|
px
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="MinusIcon"
|
|
tabler="IconMinus"
|
|
hugeicons="MinusSignIcon"
|
|
phosphor="MinusIcon"
|
|
remixicon="RiSubtractLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="PlusIcon"
|
|
tabler="IconPlus"
|
|
hugeicons="PlusSignIcon"
|
|
phosphor="PlusIcon"
|
|
remixicon="RiAddLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Field>
|
|
</FieldGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupWithLike() {
|
|
return (
|
|
<Example title="With Like">
|
|
<ButtonGroup>
|
|
<Button variant="outline">
|
|
<IconPlaceholder
|
|
lucide="HeartIcon"
|
|
tabler="IconBell"
|
|
hugeicons="Notification02Icon"
|
|
phosphor="HeartIcon"
|
|
remixicon="RiHeartLine"
|
|
data-icon="inline-start"
|
|
/>{" "}
|
|
Like
|
|
</Button>
|
|
<Button variant="outline" asChild size="icon" className="w-12">
|
|
<span>1.2K</span>
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupWithSelectAndInput() {
|
|
return (
|
|
<Example title="With Select and Input">
|
|
<ButtonGroup>
|
|
<Select defaultValue="hours">
|
|
<SelectTrigger id="duration">
|
|
<SelectValue placeholder="Select duration" />
|
|
</SelectTrigger>
|
|
<SelectContent align="start">
|
|
<SelectGroup>
|
|
<SelectItem value="hours">Hours</SelectItem>
|
|
<SelectItem value="days">Days</SelectItem>
|
|
<SelectItem value="weeks">Weeks</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Input />
|
|
</ButtonGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupNested() {
|
|
return (
|
|
<Example title="Nested">
|
|
<ButtonGroup>
|
|
<ButtonGroup>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="PlusIcon"
|
|
tabler="IconPlus"
|
|
hugeicons="PlusSignIcon"
|
|
phosphor="PlusIcon"
|
|
remixicon="RiAddLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup>
|
|
<InputGroup>
|
|
<InputGroupInput placeholder="Send a message..." />
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<InputGroupAddon align="inline-end">
|
|
<IconPlaceholder
|
|
lucide="AudioLinesIcon"
|
|
tabler="IconHeadphones"
|
|
hugeicons="AudioWave01Icon"
|
|
phosphor="MicrophoneIcon"
|
|
remixicon="RiMicLine"
|
|
/>
|
|
</InputGroupAddon>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Voice Mode</TooltipContent>
|
|
</Tooltip>
|
|
</InputGroup>
|
|
</ButtonGroup>
|
|
</ButtonGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupPagination() {
|
|
return (
|
|
<Example title="Pagination">
|
|
<ButtonGroup>
|
|
<Button variant="outline" size="sm">
|
|
<IconPlaceholder
|
|
lucide="ArrowLeftIcon"
|
|
tabler="IconArrowLeft"
|
|
hugeicons="ArrowLeft01Icon"
|
|
phosphor="ArrowLeftIcon"
|
|
remixicon="RiArrowLeftLine"
|
|
data-icon="inline-start"
|
|
/>
|
|
Previous
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
1
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
2
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
3
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
4
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
5
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
Next
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight01Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
data-icon="inline-end"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupPaginationSplit() {
|
|
return (
|
|
<Example title="Pagination Split">
|
|
<ButtonGroup>
|
|
<ButtonGroup>
|
|
<Button variant="outline" size="sm">
|
|
1
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
2
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
3
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
4
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
5
|
|
</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup>
|
|
<Button variant="outline" size="icon-xs">
|
|
<IconPlaceholder
|
|
lucide="ArrowLeftIcon"
|
|
tabler="IconArrowLeft"
|
|
hugeicons="ArrowLeft01Icon"
|
|
phosphor="ArrowLeftIcon"
|
|
remixicon="RiArrowLeftLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline" size="icon-xs">
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight01Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
</ButtonGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupNavigation() {
|
|
return (
|
|
<Example title="Navigation">
|
|
<ButtonGroup>
|
|
<ButtonGroup>
|
|
<Button variant="outline">
|
|
<IconPlaceholder
|
|
lucide="ArrowLeftIcon"
|
|
tabler="IconArrowLeft"
|
|
hugeicons="ArrowLeft01Icon"
|
|
phosphor="ArrowLeftIcon"
|
|
remixicon="RiArrowLeftLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline">
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight01Icon"
|
|
phosphor="ArrowRightIcon"
|
|
remixicon="RiArrowRightLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup aria-label="Single navigation button">
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="ArrowLeftIcon"
|
|
tabler="IconArrowLeft"
|
|
hugeicons="ArrowLeft01Icon"
|
|
phosphor="ArrowLeftIcon"
|
|
remixicon="RiArrowLeftLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
</ButtonGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupTextAlignment() {
|
|
return (
|
|
<Example title="Text Alignment">
|
|
<Field>
|
|
<Label id="alignment-label">Text Alignment</Label>
|
|
<ButtonGroup aria-labelledby="alignment-label">
|
|
<Button variant="outline" size="sm">
|
|
Left
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
Center
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
Right
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
Justify
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Field>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupVertical() {
|
|
return (
|
|
<Example title="Vertical">
|
|
<div className="flex gap-6">
|
|
<ButtonGroup
|
|
orientation="vertical"
|
|
aria-label="Media controls"
|
|
className="h-fit"
|
|
>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="PlusIcon"
|
|
tabler="IconPlus"
|
|
hugeicons="PlusSignIcon"
|
|
phosphor="PlusIcon"
|
|
remixicon="RiAddLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="MinusIcon"
|
|
tabler="IconMinus"
|
|
hugeicons="MinusSignIcon"
|
|
phosphor="MinusIcon"
|
|
remixicon="RiSubtractLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ButtonGroupVerticalNested() {
|
|
return (
|
|
<Example title="Vertical Nested">
|
|
<ButtonGroup orientation="vertical" aria-label="Design tools palette">
|
|
<ButtonGroup orientation="vertical">
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="SearchIcon"
|
|
tabler="IconSearch"
|
|
hugeicons="Search01Icon"
|
|
phosphor="MagnifyingGlassIcon"
|
|
remixicon="RiSearchLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="CopyIcon"
|
|
tabler="IconCopy"
|
|
hugeicons="Copy01Icon"
|
|
phosphor="CopyIcon"
|
|
remixicon="RiFileCopyLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="ShareIcon"
|
|
tabler="IconShare"
|
|
hugeicons="Share03Icon"
|
|
phosphor="ShareIcon"
|
|
remixicon="RiShareLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup orientation="vertical">
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="FlipHorizontalIcon"
|
|
tabler="IconFlipHorizontal"
|
|
hugeicons="FlipHorizontalIcon"
|
|
phosphor="ArrowsHorizontalIcon"
|
|
remixicon="RiArrowLeftRightLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="FlipVerticalIcon"
|
|
tabler="IconFlipVertical"
|
|
hugeicons="FlipVerticalIcon"
|
|
phosphor="ArrowsVerticalIcon"
|
|
remixicon="RiArrowUpDownLine"
|
|
/>
|
|
</Button>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="RotateCwIcon"
|
|
tabler="IconRotateClockwise2"
|
|
hugeicons="Rotate01Icon"
|
|
phosphor="ArrowClockwiseIcon"
|
|
remixicon="RiRefreshLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup>
|
|
<Button variant="outline" size="icon">
|
|
<IconPlaceholder
|
|
lucide="TrashIcon"
|
|
tabler="IconTrash"
|
|
hugeicons="Delete02Icon"
|
|
phosphor="TrashIcon"
|
|
remixicon="RiDeleteBinLine"
|
|
/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
</ButtonGroup>
|
|
</Example>
|
|
)
|
|
}
|