Bileşenler

Tag

Kategori, uygulanan filtre ya da alıcı gibi öğeleri etiketler; kaldırılabilir ya da seçilebilir.

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

Tag, kısa bir etiket metnidir: çerçeveli, saydam zeminli ve 32 px yüksekliğindedir. Varsayılan Tag nötrdür ve etkileşimsizdir.

Etiket

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

export default function Default() {
  return <Tag>Etiket</Tag>;
}

Tonlar

Altı ton vardır: nötr, marka, bilgi, başarı, uyarı ve hata. Ton yalnızca çerçeveyi ve metni boyar; anlamı metin taşır. Çoğu etiket için nötr yeterlidir.

NötrMarkaBilgiBaşarıUyarıHata

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

export default function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag tone="neutral">Nötr</Tag>
      <Tag tone="brand">Marka</Tag>
      <Tag tone="info">Bilgi</Tag>
      <Tag tone="success">Başarı</Tag>
      <Tag tone="warning">Uyarı</Tag>
      <Tag tone="danger">Hata</Tag>
    </div>
  );
}

Boyutlar

size yüksekliği ve iç boşluğu belirler: sm 24 px, md 32 px. Yoğun listelerde ve tablo hücrelerinde sm kullanın.

KüçükOrta

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

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag size="sm">Küçük</Tag>
      <Tag size="md">Orta</Tag>
    </div>
  );
}

Simge ile

icon etiketin başına süs amaçlı bir simge ekler. Ekran okuyucu simgeyi atlar; anlamı etiket metni taşır.

TasarımAraştırma

import { Icon, Tag } from '@bigbang/ui';

export default function WithIcon() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag icon={<Icon name="user" size="inherit" />}>Tasarım</Tag>
      <Tag tone="info" icon={<Icon name="info" size="inherit" />}>
        Araştırma
      </Tag>
    </div>
  );
}

Kaldırılabilir

onRemove etiketin sonuna gerçek bir buton ekler. Düğmenin adı “Tasarım kaldır” gibi kitaplık metninden gelir; removeLabel ile değiştirebilirsiniz. Etiketleri Tag.Group içine koyun: odaktaki kaldır düğmesinde Backspace ya da Delete etiketi kaldırır ve odak sonraki etiketin düğmesine geçer.

Tasarım
Geliştirme
Araştırma

import { Tag } from '@bigbang/ui';
import { useState } from 'react';

export default function Removable() {
  const [items, setItems] = useState(['Tasarım', 'Geliştirme', 'Araştırma']);
  return (
    <Tag.Group aria-label="Etiketler">
      {items.map((item) => (
        <Tag key={item} onRemove={() => setItems((current) => current.filter((name) => name !== item))}>
          {item}
        </Tag>
      ))}
    </Tag.Group>
  );
}

Seçilebilir

selected ya da defaultSelected etiketi bir açma-kapama düğmesine çevirir (aria-pressed). Seçili etiket marka renklerini alır ve bir onay işareti gösterir. Seçilebilir etiket kaldırılamaz.

import { Tag } from '@bigbang/ui';
import { useState } from 'react';

const items = ['Tasarım', 'Geliştirme', 'Araştırma'];

export default function Selectable() {
  const [selected, setSelected] = useState(['Tasarım']);
  return (
    <Tag.Group aria-label="Filtreler">
      {items.map((item) => (
        <Tag
          key={item}
          selected={selected.includes(item)}
          onSelectedChange={(next) => setSelected((current) => (next ? [...current, item] : current.filter((name) => name !== item)))}
        >
          {item}
        </Tag>
      ))}
    </Tag.Group>
  );
}

Devre dışı

disabled kaldır düğmesini ya da açma-kapama düğmesini kapatır ve etiketi soluklaştırır. Devre dışı etiket sekme sırasından çıkar.

Tasarım

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

export default function Disabled() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag disabled onRemove={() => {}}>
        Tasarım
      </Tag>
      <Tag disabled defaultSelected>
        Araştırma
      </Tag>
    </div>
  );
}

Açık ve koyu mod

Tag tüm renklerini durum ve kenarlık token’larından alır; iki modda da aynı yapıda görünür.

NötrMarkaBilgiBaşarıUyarıHata

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

export default function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag tone="neutral">Nötr</Tag>
      <Tag tone="brand">Marka</Tag>
      <Tag tone="info">Bilgi</Tag>
      <Tag tone="success">Başarı</Tag>
      <Tag tone="warning">Uyarı</Tag>
      <Tag tone="danger">Hata</Tag>
    </div>
  );
}