Bileşenler

IconButton

Yalnızca ikon taşıyan, zorunlu erişilebilir adı olan işlem butonu.

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

IconButton, tertiary görünümde ve 36 px kare kutuda gelir. label butona ad verir; ikon süstür.

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

export default function Default() {
  return <IconButton icon="x" label="Kapat" />;
}

Varyantlar ve tonlar

variant ve tone, Button ile aynı değerleri alır. Bir bölgede tek primary kullanın.

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

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <IconButton variant="primary" icon="plus" label="Ekle" />
      <IconButton variant="secondary" icon="ellipsis" label="Diğer işlemler" />
      <IconButton icon="x" label="Kapat" />
      <IconButton variant="secondary" tone="danger" icon="trash" label="Sil" />
    </div>
  );
}

Boyutlar ve şekil

size 32, 36 ve 40 px kare kutu verir. shape="circle" butonu tam yuvarlak yapar.

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

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <IconButton variant="secondary" size="sm" icon="plus" label="Ekle" />
      <IconButton variant="secondary" icon="plus" label="Ekle" />
      <IconButton variant="secondary" size="lg" icon="plus" label="Ekle" />
      <IconButton variant="primary" size="lg" shape="circle" icon="plus" label="Ekle" />
    </div>
  );
}

Durumlar

disabled butonu sekme sırasından çıkarır; focusableWhenDisabled odakta tutar. loading ikonun yerine dönen gösterge koyar.

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

export default function States() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <IconButton variant="secondary" icon="x" label="Kapat" disabled />
      <IconButton variant="secondary" icon="x" label="Kapat" disabled focusableWhenDisabled />
      <IconButton variant="primary" icon="plus" label="Ekle" loading />
    </div>
  );
}

Açık ve koyu mod

Renkler color-action-* token’larından gelir; açık ve koyu modda ayrı ayar gerekmez.

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

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <IconButton variant="primary" icon="plus" label="Ekle" />
      <IconButton variant="secondary" icon="ellipsis" label="Diğer işlemler" />
      <IconButton icon="x" label="Kapat" />
      <IconButton variant="secondary" tone="danger" icon="trash" label="Sil" />
    </div>
  );
}