Button Group
Icon Only Tabs
A single-choice control made of bare icons where every segment still carries a real text name, with a tooltip appearing below.
- buttongroup
- icons
- tooltip
- segmented
Preview
1440pxHost theme
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this in the header: https://vibeui.ru/c/buttongroup-014?lang=en
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
# Install and place "buttongroup-014" (Icon Only Tabs) from VibeUI
## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/buttongroup-014.json
Registry item: https://vibeui.ru/r/buttongroup-014.json
Installs to: components/vibeui/buttongroup-014.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.
Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.
## 2. What it is
A single-choice control made of bare icons where every segment still carries a real text name, with a tooltip appearing below.
An icon-only segmented control: the name sits as real text, the tooltip drops below. Zero dependencies, one file, a server component.
## 3. How to use it
import { Buttongroup014 } from "@/components/vibeui/buttongroup-014"
<Buttongroup014
options={[{ id: "day", label: "Day" }, { id: "week", label: "Week" }]}
defaultValue="week"
label="Scale"
name="scale"
/>
Read the installed file for the full prop list.
## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.
Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)
## 5. Keep exactly as installed
- the local --vibeui-buttongroup-014-* palette — do not swap it for your theme tokens
- the text name inside the segment under clip-path: unlike aria-label, find-in-page can reach it
- aria-hidden on the visible tooltip — otherwise the screen reader announces the name twice
- showing the tooltip on :focus-visible, not just :hover: from the keyboard the icons are otherwise unreadable
- radios instead of buttons: this is a single choice, and the browser has already written its keyboard
- a segment no smaller than 2.375rem — the touch target is already at its limit
## 6. You may change
- the options and their icons through options
- the initially selected option through defaultValue
- the accessible group name through label
- the form field name through name and the fill colour through accent
## 7. Rules
- The tooltip drops downwards and gets clipped if the group sits at the bottom edge of an overflow:hidden container.
- Icons live as paths in ICONS: an unknown id silently falls back to the first path.
- Bare icons are recognised worse: for rare options add text.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.
## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.For developers
npx shadcn@latest add https://vibeui.ru/r/buttongroup-014.jsonhttps://vibeui.ru/r/buttongroup-014.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-014-*. Серверный: хуков нет, выбор держат radio в fieldset. Имя сегмента — настоящий текст под clip-path:inset(50%): его читает скринридер и находит поиск по странице, в отличие от aria-label. Видимая подсказка — отдельный aria-hidden узел, показывается и на :hover, и на :focus-visible, уходит вниз (top:calc(100% + 0.5rem)), потому что группа обычно стоит в шапке и сверху места нет. Трек — flex с внутренним отступом и общей рамкой, сегменты не сцеплены границами, а разделены gap:0.1875rem. Выбранный сегмент заливается акцентом, сфокусированный поднимается z-index:2.
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Buttongroup014Option = {
id: string
label: string
}
export type Buttongroup014Props = Omit<
ComponentPropsWithoutRef<"fieldset">,
"children"
> & {
options?: Buttongroup014Option[]
defaultValue?: string
label?: string
name?: string
accent?: string
}
// Идея компонента: выбор одного варианта голыми значками, где подпись всё
// равно есть — она лежит настоящим текстом под clip-path (его читает
// скринридер и находит поиск по странице) и всплывает подсказкой снизу.
// Подсказка уходит вниз, а не вверх: группа такого вида обычно стоит в
// шапке, и вверху для неё места нет. Показ и по :hover, и по :focus-visible —
// с клавиатуры значки иначе неразличимы.
const STYLES = `
:where([data-vibeui-block="buttongroup-014"]){
--vibeui-buttongroup-014-surface:oklch(1 0 0);
--vibeui-buttongroup-014-muted:oklch(0.55 0.014 265);
--vibeui-buttongroup-014-border:oklch(0.89 0.008 265);
--vibeui-buttongroup-014-accent:oklch(0.52 0.16 265);
--vibeui-buttongroup-014-on-accent:oklch(0.99 0.004 265);
--vibeui-buttongroup-014-tip:oklch(0.26 0.016 265);
--vibeui-buttongroup-014-radius:0.625rem;
--vibeui-buttongroup-014-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="buttongroup-014"]{
box-sizing:border-box;display:inline-block;
margin:0;padding:0;border:0;
font-family:var(--vibeui-buttongroup-014-font);
}
[data-vibeui-block="buttongroup-014"] *{box-sizing:border-box}
[data-vibeui-block="buttongroup-014"] legend{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
[data-vibeui-block="buttongroup-014"] [data-part="track"]{
display:flex;isolation:isolate;
padding:0.1875rem;gap:0.1875rem;
border:1px solid var(--vibeui-buttongroup-014-border);
border-radius:calc(var(--vibeui-buttongroup-014-radius) + 0.1875rem);
background:var(--vibeui-buttongroup-014-surface);
}
[data-vibeui-block="buttongroup-014"] [data-part="segment"]{
position:relative;z-index:0;
display:inline-flex;align-items:center;justify-content:center;
width:2.375rem;height:2.375rem;
border-radius:var(--vibeui-buttongroup-014-radius);
color:var(--vibeui-buttongroup-014-muted);cursor:pointer;
transition:background-color .16s ease,color .16s ease;
}
[data-vibeui-block="buttongroup-014"] input{
position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
[data-vibeui-block="buttongroup-014"] svg{
width:1.125rem;height:1.125rem;
stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;
}
/* Имя сегмента — настоящий текст, спрятанный из потока. */
[data-vibeui-block="buttongroup-014"] [data-part="name"]{
position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
[data-vibeui-block="buttongroup-014"] [data-part="segment"]:hover{
background:oklch(0.96 0.006 265);color:var(--vibeui-buttongroup-014-tip);
}
[data-vibeui-block="buttongroup-014"] [data-part="segment"]:has(input:checked){
z-index:1;
background:var(--vibeui-buttongroup-014-accent);
color:var(--vibeui-buttongroup-014-on-accent);
}
[data-vibeui-block="buttongroup-014"] [data-part="segment"]:has(input:focus-visible){
z-index:2;
outline:2px solid var(--vibeui-buttongroup-014-accent);outline-offset:2px;
}
/* Видимая подсказка помечена aria-hidden: имя уже прочитано текстом выше. */
[data-vibeui-block="buttongroup-014"] [data-part="tip"]{
position:absolute;top:calc(100% + 0.5rem);left:50%;z-index:3;
padding:0.25rem 0.5rem;border-radius:0.375rem;
background:var(--vibeui-buttongroup-014-tip);
color:oklch(0.99 0 0);
font-size:0.6875rem;font-weight:600;line-height:1.3;white-space:nowrap;
opacity:0;translate:-50% 0.25rem;pointer-events:none;
transition:opacity .14s ease,translate .14s ease;
}
[data-vibeui-block="buttongroup-014"] [data-part="segment"]:hover [data-part="tip"],
[data-vibeui-block="buttongroup-014"] [data-part="segment"]:has(input:focus-visible) [data-part="tip"]{
opacity:1;translate:-50% 0;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="buttongroup-014"] *{animation:none!important;transition:none!important}}
`
const ICONS: Record<string, string> = {
day: "M12 3v2M12 19v2M5 12H3M21 12h-2M6 6l-1.5-1.5M19.5 19.5 18 18M18 6l1.5-1.5M4.5 19.5 6 18M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8",
week: "M4 5h16v15H4zM4 9h16M9 3v4M15 3v4",
month: "M4 5h16v15H4zM4 10h16M8 14h3M8 17h8",
}
const DEFAULT_OPTIONS: Buttongroup014Option[] = [
{ id: "day", label: "Сутки" },
{ id: "week", label: "Неделя" },
{ id: "month", label: "Месяц" },
]
/**
* Выбор одного варианта голыми значками: имя лежит текстом, подсказка снизу.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Buttongroup014({
options = DEFAULT_OPTIONS,
defaultValue = "week",
label = "Масштаб шкалы",
name = "buttongroup-014",
accent,
className,
style,
...props
}: Buttongroup014Props) {
const palette = {
...(accent ? { "--vibeui-buttongroup-014-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-buttongroup-014" precedence="medium">
{STYLES}
</style>
<fieldset
{...props}
data-vibeui-block="buttongroup-014"
className={className}
style={palette}
>
<legend>{label}</legend>
<div data-part="track">
{options.map((option) => (
<label key={option.id} data-part="segment">
<input
type="radio"
name={name}
value={option.id}
defaultChecked={option.id === defaultValue}
/>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d={ICONS[option.id] ?? ICONS.day} />
</svg>
<span data-part="name">{option.label}</span>
<span data-part="tip" aria-hidden="true">
{option.label}
</span>
</label>
))}
</div>
</fieldset>
</>
)
}