ButtonGroup

Ne zaman kullanılır

ButtonGroup, birlikte anlam taşıyan butonlar içindir: önceki ve sonraki sayfa, bir işlem ile onun seçenek menüsü, bir diyaloğun alt işlemleri.

Ne zaman kullanılmaz

• Seçeneklerden biri basılı kalacaksa: ToggleGroup kullanın; ok tuşları ve basılı durum verir.
• Birbirinden bağımsız işlemler için: Butonları Inline ile dizin; grup adı gerekmez.
• Sayfalar arası gezinme için: Bağlantılar Link ile kurulur.

Anatomi

AçıkKoyu

Kodu kopyala

import { ButtonGroup, IconButton } from '@bigbang/ui';

export default function Attached() {
  return (
    <ButtonGroup attached label="Sayfalar">
      <IconButton variant="secondary" icon="chevron-left" label="Önceki" />
      <IconButton variant="secondary" icon="chevron-right" label="Sonraki" />
    </ButtonGroup>
  );
}

1. Kap: role="group" taşıyan <div>; label varsa aria-label olarak adı verir.
2. Butonlar: Aynı boyutta Button ya da IconButton öğeleri.
3. Ortak kenarlık: attached ile iç köşeler düzleşir, kenarlıklar 1 px üst üste biner.

Davranış

• Her buton ayrı bir sekme durağıdır; ok tuşları kullanılmaz.
• Birleşik grupta odaklanan buton öne gelir (z-index: 1); odak halkası komşusunun altında kalmaz.
• Köşeler mantıksal yönlerle verilir (rounded-s, rounded-e); sağdan sola metinde birleşim aynalanır.
• ButtonGroup kendi hareketini taşımaz; her buton Button’ın basma hareketini korur.

Yönergeler

• Bir grupta aynı size kullanın; birleşik grupta secondary butonlar kullanın.
• Grupta en çok bir primary buton olsun ve sona gelsin.
• Butonlar yalnızca birlikte anlam taşıyorsa label verin: “Sayfalar”.
• Birleşik grupta üçten çok buton varsa bir menüye taşımayı düşünün.

İçerik

• label grubun konusunu söyleyen bir ad öbeğidir; fiil değildir.
• Butonların metinleri aynı dilbilgisel yapıda olsun: “Önceki”, “Sonraki”.

Türkçe	İngilizce
Sayfalar	Pages
Önceki	Previous
Sonraki	Next

İlgili bileşenler

• Button: Grubun öğeleri.
• IconButton: Yalnızca ikonlu öğeler.
• ToggleGroup: Basılı kalan seçenekler.
• Inline: Bağımsız öğeleri yan yana dizer.