Component'ler
Merid'in component'leri ne işe yaradıklarına göre gruplanır. Her birinin canlı önizleme, props, klavye etkileşimleri ve kullanım önerileri içeren kendi sayfası vardır.
Form girdileri
ButtonPrimary, secondary, ghost, danger ve link aksiyonları.KararlıIconButtonTek ikon için kare buton; label zorunlu.KararlıLabelForm kontrolü için erişilebilir etiket.KararlıFieldHer kontrol için etiket, yardım metni ve hata mesajı.KararlıInputInvalid ve disabled durumları olan tek satırlık metin alanı.KararlıTextareaÇok satırlı metin alanı.KararlıNativeSelectStil verilmiş native select elemanı.KararlıSelectÖzel bir listbox'tan tek seçenek seçtirir.KararlıCheckboxBağımsız bir seçeneği açıp kapatır.KararlıRadioAz sayıda görünür seçenekten birini seçtirir.KararlıSwitchBir ayarı anında açar ya da kapatır.KararlıSegmentedControlBirkaç görünüm ya da mod arasında geçiş.KararlıCalendarGün ya da aralık seçmek için ay grid'i; Intl ile yerelleşir.KararlıComboboxTekli, çoklu ve async seçenekli, aranabilir select.KararlıDatePickerTakvim popover'lı, yazılabilir tarih alanı; tek gün ya da aralık.KararlıFileUploadSürükle-bırak alanlı, erişilebilir dosya seçici.KararlıNumberInputArtır/azalt butonlu, Intl.NumberFormat ile biçimlenen sayı alanı.KararlıPinInputTek kullanımlık kod girişi; her karakter için bir hücre.KararlıSliderBir track üzerinde değer ya da aralık seçtirir.KararlıToggleGroupTek başına ya da tekli/çoklu set olarak toggle butonlar.KararlıToolbarTek Tab durağı olan ilişkili kontroller satırı.Beta
Layout
Containerİçeriği container genişliğinde, gutter'larla ortalar.KararlıSectionTutarlı padding'le dikey sayfa bölümü.KararlıStackToken ölçeğinde dikey ya da yatay boşluk.KararlıGridResponsive kolon grid'i.KararlıCardGruplanmış içerik için gri ya da yükseltilmiş yüzey.KararlıSeparatorBölgeler arasında 1px'lik ince çizgi.KararlıScrollAreaİnce, temaya uyan scrollbar'larla native kaydırma.Beta
Tipografi
HeadingHer seviyede sıkı ve dengeli başlıklar.KararlıTextÜç tonda gövde metni.KararlıCodeSatır içi kod.KararlıKbdKlavye tuşu.KararlıVisuallyHiddenYalnızca yardımcı teknolojilere yönelik içerik.KararlıShortcut⌘K gibi platforma göre değişen tuş kombinasyonu.Beta
Veri gösterimi
Tableİnce satır çizgileri ve tabular rakamlarla tablo verisi.KararlıBadgeAltı tonda kısa durum ya da sayı.KararlıAvatarKişi ya da kurum için görsel veya baş harfler.KararlıAccordionÜst üste açılıp kapanan bölümler.KararlıTabsPaneller arasında geçiş için çizgi tab'lar.KararlıEmptyStateHenüz gösterilecek bir şey yokken yer tutucu.KararlıCollapsibleTek bir bölgeyi gösterir ve gizler.BetaDataTableTable üzerinde sıralama, filtreleme, sayfalama ve satır seçimi.Beta
Geri bildirim
AlertInfo, success, warning ya da danger tonunda satır içi bildirim.KararlıToastAkışı kesmeyen kısa onay mesajı.KararlıProgressBelirli ilerleme çubuğu.KararlıSpinnerKısa beklemeler için belirsiz ilerleme göstergesi.KararlıSkeletonİçerik yüklenirken yer tutucu şekiller.Kararlı
Overlay
DialogOdaklı bir iş için modal pencere.KararlıAlertDialogYanıt bekleyen modal onay.KararlıDrawerKenardan kayarak açılan panel.KararlıPopoverTetikleyiciye bağlı, modal olmayan açılır panel.KararlıTooltipHover ve focus'ta görünen kısa etiket.KararlıDropdownMenuBir butondan açılan aksiyon listesi.KararlıPortalChildren'ı document.body içine render'lar.KararlıCommandAranabilir komut menüsü ve ⌘K paleti.BetaContextMenuSağ tıkla açılan aksiyon menüsü.BetaHoverCardBir link'e hover ya da focus'ta önizleme kartı.Beta
Navigasyon
LinkSatır içi ve bağımsız link'ler.KararlıBreadcrumbGeçerli sayfanın hiyerarşideki yeri.KararlıPaginationSonuç sayfaları arasında gezinme.KararlıStepperÇok adımlı bir akışta ilerleme.KararlıSidebarNavUygulama sidebar'ları için gruplu dikey navigasyon.KararlıNavigationMenuAçılır ve mega menülü üst site navigasyonu.Beta