Bileşenler

Text

Gövde metni, etiket, açıklama ve rakamları token tipografisiyle yazar.

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ç

Boyutlar ve kalınlık

sm 12 px, md 14 px, lg 16 px verir. weight="medium" aynı boyutun etiket stilini kullanır. lg yalnızca normal kalınlıktadır; 16 px için etiket token’ı yoktur.

lg, 16 px: metin örneğimd, 14 px: metin örneğism, 12 px: metin örneğimd, orta kalınlık: metin örneğism, orta kalınlık: metin örneği

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

export default function Sizes() {
  return (
    <div className="flex flex-col gap-sm">
      <Text size="lg">lg, 16 px: metin örneği</Text>
      <Text size="md">md, 14 px: metin örneği</Text>
      <Text size="sm">sm, 12 px: metin örneği</Text>
      <Text size="md" weight="medium">md, orta kalınlık: metin örneği</Text>
      <Text size="sm" weight="medium">sm, orta kalınlık: metin örneği</Text>
    </div>
  );
}

Tonlar

Ton yalnızca rengi değiştirir. Durum tonları (danger, success, warning, info) anlamı tek başına taşımaz; metin ya da ikon da söylemelidir.

default: metin örneğisubtle: metin örneğisubtlest: metin örneğidanger: metin örneğisuccess: metin örneğiwarning: metin örneğiinfo: metin örneği

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

const tones = ['default', 'subtle', 'subtlest', 'danger', 'success', 'warning', 'info'] as const;

export default function Tones() {
  return (
    <div className="flex flex-col gap-xs">
      {tones.map((tone) => (
        <Text key={tone} tone={tone}>
          {tone}: metin örneği
        </Text>
      ))}
    </div>
  );
}

Koyu zeminde

inverse tonu koyu zemin (surface-inverse) üzerindeki metin içindir.

Koyu zeminde metin örneği

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

export default function Inverse() {
  return (
    <div className="bg-surface-inverse px-lg py-md">
      <Text tone="inverse">Koyu zeminde metin örneği</Text>
    </div>
  );
}

Kısaltma

truncate metni bir satırdan sonra (true) ya da verilen satır sayısından (2-6) sonra üç nokta ile keser. Tam metni ayrıca verin; örnekte title kullanılır.

Bu metin yalnızca bir örnektir ve kutuya sığmayacak kadar uzun yazılmıştır; kesilen kısım başlık özniteliğinde durur.Bu metin yalnızca bir örnektir ve kutuya sığmayacak kadar uzun yazılmıştır; kesilen kısım başlık özniteliğinde durur.

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

const long = 'Bu metin yalnızca bir örnektir ve kutuya sığmayacak kadar uzun yazılmıştır; kesilen kısım başlık özniteliğinde durur.';

export default function Truncate() {
  return (
    <div className="flex w-64 flex-col gap-md">
      <Text truncate title={long}>
        {long}
      </Text>
      <Text truncate={2} title={long}>
        {long}
      </Text>
    </div>
  );
}

Tablo rakamları

numeric rakamları eşit genişlikte çizer; sütunlarda hizalanır, değer değişirken kaymaz.

numeric yok11:1188:88

numeric11:1188:88

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

export default function Numeric() {
  return (
    <div className="flex gap-3xl">
      <div className="flex flex-col gap-xs">
        <Text size="sm" tone="subtle">numeric yok</Text>
        <Text>11:11</Text>
        <Text>88:88</Text>
      </div>
      <div className="flex flex-col gap-xs">
        <Text size="sm" tone="subtle">numeric</Text>
        <Text numeric>11:11</Text>
        <Text numeric>88:88</Text>
      </div>
    </div>
  );
}

Öğe olarak

Varsayılan öğe <span>tır. render ile <p>, <strong>, <label> ya da <time> çizin.

Paragraf: metin örneği

Vurgu: metin örneği28 Ekim 2026

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

export default function AsElement() {
  return (
    <div className="flex flex-col gap-sm">
      <Text render={<p />}>Paragraf: metin örneği</Text>
      <Text render={<strong />} weight="medium">Vurgu: metin örneği</Text>
      <Text render={<time dateTime="2026-10-28" />} tone="subtle">28 Ekim 2026</Text>
    </div>
  );
}

Açık ve koyu mod

Renkler metin token’larından gelir; açık ve koyu modda ayrı ayar gerekmez.

default: metin örneğisubtle: metin örneğisubtlest: metin örneğidanger: metin örneğisuccess: metin örneğiwarning: metin örneğiinfo: metin örneği

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

const tones = ['default', 'subtle', 'subtlest', 'danger', 'success', 'warning', 'info'] as const;

export default function Tones() {
  return (
    <div className="flex flex-col gap-xs">
      {tones.map((tone) => (
        <Text key={tone} tone={tone}>
          {tone}: metin örneği
        </Text>
      ))}
    </div>
  );
}