Bileşenler
Stepper
Kullanıcının kayıt ya da sihirbaz gibi adımlı bir akışta nerede olduğunu gösterir.
Playground
- 1Hesap
- 2Profil
- 3Ekip
- 4Fatura
Figma varyantı
Stepper Item 1: 🕹 State=Success
Stepper Item 2: 🕹 State=Current
Stepper Item 3: 🕹 State=Next
Stepper Item 4: 🕹 State=NextAdım durumları
Biten adımlar success daireleridir, bulunulan adım numarası ve başlığıyla primary soft bir haptır, sonraki adımlar surface/level-3 dairelerdir.
- 1Account
- 2Profile
- 3Team
- 4Review
Tokenlar
| State | Background | Text |
|---|---|---|
| Success | --color-success | --color-on-success |
| Current | --color-primary-soft | --color-primary |
| Next | --color-surface-level-3 | --color-foreground-medium-emphasis |
| Gap | --space-tiny | — |
Figma notları
- Numaralar ve başlıklar bağlı olmayan 12px Medium bir stil; kod, Figma’daki gibi başlığı büyük harfle, ui/text small/bold kullanır.
- Success metin rengi ham; kod on-success kullanır.
- Figma’da adımlar tıklanabilir değil; kod butonsuz sıralı bir liste çizer.
Figma’dan koda
| Figma | React |
|---|---|
| .Stepper Item 🕹 State = Success / Current / Next | steps before / at / after current |
| Stepper Item 1 … 6 | steps |