Bileşenler

ButtonGroup

İlişkili butonları aralıklı ya da birleşik olarak tek satırda ya da sütunda toplar.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

ButtonGroup, butonları space-sm (6 px) aralıkla yan yana dizer ve role="group" verir.

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

export default function Default() {
  return (
    <ButtonGroup>
      <Button variant="secondary">İkincil buton</Button>
      <Button>Birincil buton</Button>
    </ButtonGroup>
  );
}

Birleşik

attached, butonları ortak kenarlıklı tek denetim yapar. İç köşeler düz olur; her buton bir öncekinin kenarlığına 1 px biner.

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>
  );
}

Bölünmüş işlem

Bir Button ile bir IconButton birleşince ana işlem ve diğer işlemler menüsü tek denetim gibi okunur.

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

export default function Split() {
  return (
    <ButtonGroup attached>
      <Button variant="secondary">İkincil buton</Button>
      <IconButton variant="secondary" icon="ellipsis" label="Diğer işlemler" />
    </ButtonGroup>
  );
}

Dikey

orientation="vertical" butonları alt alta dizer ve genişliklerini eşitler.

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

export default function Vertical() {
  return (
    <ButtonGroup orientation="vertical" attached label="Sayfalar">
      <Button variant="secondary">Önceki</Button>
      <Button variant="secondary">Sonraki</Button>
    </ButtonGroup>
  );
}

Açık ve koyu mod

ButtonGroup renk taşımaz; butonlar kendi token’larını kullanır.

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>
  );
}