Yami UI

Groups related buttons together with consistent styling.

Installation

Add the button group component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/button-group.json

Usage

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

<ButtonGroup>
  <Button variant="outline">Copy</Button>
  <Button variant="outline">Paste</Button>
  <Button variant="outline">Cut</Button>
</ButtonGroup>

Examples

With separator

ButtonGroupSeparator

Code

import { ChevronRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"

<ButtonGroup>
  <Button variant="outline">Save</Button>
  <ButtonGroupSeparator />
  <Button variant="outline" size="icon" aria-label="More">
    <ChevronRightIcon />
  </Button>
</ButtonGroup>

With text addon

ButtonGroupText

https://

Code

import { Input } from "@/components/ui/input"
import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group"

<ButtonGroup>
  <ButtonGroupText>https://</ButtonGroupText>
  <Input placeholder="yami.ui.unsanity.ai" className="w-40" />
</ButtonGroup>