nili/ui
enfaartr
Tüm bileşenler

Button

Genel görünüm
42 export19 varyant ekseni72 prop12 dosya
import { Button, ButtonGroup, CompactButton, FancyButton, LinkButton } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Görünümler

Dört görsel stil. Varsayılan filled; daha az görsel ağırlık gerektiğinde stroke, lighter veya ghost kullanın.

import { Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Button appearance="filled">Filled</Button>
      <Button appearance="stroke">Stroke</Button>
      <Button appearance="lighter">Lighter</Button>
      <Button appearance="ghost">Ghost</Button>
    </>
  )
}

Renkler

primary, neutral, error ve success. Her görünümle serbestçe birleşir.

primary
neutral
error
success
import { Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Button color="primary">Primary</Button>
      <Button color="neutral">Neutral</Button>
      <Button color="error">Error</Button>
      <Button color="success">Success</Button>
    </>
  )
}

Boyutlar

Varsayılan md (40px). Küçük boyutlar aynı simge ve tipografi ölçeğini korur.

import { Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Button size="md">Medium</Button>
      <Button size="sm">Small</Button>
      <Button size="xs">X-Small</Button>
      <Button size="2xs">2X-Small</Button>
    </>
  )
}

Simgelerle

startIcon veya endIcon içine herhangi bir React düğümü verin. Simgenin boyutu ve boşluğu otomatik ayarlanır.

import { Button, Icon } from "@nili/ui"
import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react"

export function Example() {
  return (
    <Button
      startIcon={<Icon icon={RiArrowLeftSLine} mirrored />}
      endIcon={<Icon icon={RiArrowRightSLine} mirrored />}
    >
      Continue
    </Button>
  )
}

Yalnızca simge

Kare düğmeler. aria-label ile her zaman erişilebilir bir ad verin — simge tek başına ad taşımaz.

import { Button, Icon } from "@nili/ui"
import { RiAddLine } from "@remixicon/react"

export function Example() {
  return (
    <Button iconOnly aria-label="Add" startIcon={<Icon icon={RiAddLine} />} />
  )
}

Yükleniyor ve devre dışı

Yükleme durumu özgün genişliği korur, böylece yerleşim zıplamaz. Devre dışı, gerçek disabled özniteliğidir.

import { Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Button loading loadingLabel="Sending">Send</Button>
      <Button disabled>Disabled</Button>
    </>
  )
}

Tam genişlik

Formların ya da mobil sayfaların içinde işe yarar.

import { Button } from "@nili/ui"

export function Example() {
  return <Button fullWidth>Continue</Button>
}

Bağlantı düğmeleri

Metin ağırlığında, cümlenin içine oturan eylemler. Her zaman altı çizili için underline kullanın; yoksa yalnızca üzerine gelince çıkar.

Renkler
grayblackprimaryerrorsuccess
Boyutlar ve alt çizgi
OrtaKüçükHer zaman altı çiziliSimgeli
Devre dışı
Devre dışı bağlantı
import { LinkButton, Icon } from "@nili/ui"
import { RiArrowRightSLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <LinkButton href="#" color="primary">Primary link</LinkButton>
      <LinkButton href="#" color="gray">Gray link</LinkButton>
      <LinkButton href="#" color="error" underline>
        Underlined
      </LinkButton>
      <LinkButton
        href="#"
        color="primary"
        endIcon={<Icon icon={RiArrowRightSLine} mirrored />}
      >
        With icon
      </LinkButton>
    </>
  )
}

Fancy düğmeler

Bir ekrandaki tek en önemli eylem için kabartmalı varyant. İdareli kullanın — üç tane olursa hiçbiri özel değildir.

Renkler
Boyutlar
Simgelerle
import { FancyButton, Icon } from "@nili/ui"
import { RiArrowRightSLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <FancyButton color="primary">Primary</FancyButton>
      <FancyButton color="neutral">Neutral</FancyButton>
      <FancyButton color="basic">Basic</FancyButton>
      <FancyButton
        color="primary"
        endIcon={<Icon icon={RiArrowRightSLine} mirrored />}
      >
        Continue
      </FancyButton>
    </>
  )
}

Kompakt düğmeler

Dar alanlar için kare, yalnızca simgeli denetimler — tablo satır eylemleri, alan süsleri, araç çubukları. Her zaman aria-label verin.

Görünümler
Boyutlar
Tam yarıçap (hap)
import { CompactButton, Icon } from "@nili/ui"
import { RiCloseLine, RiSettings3Line, RiMore2Fill } from "@remixicon/react"

export function Example() {
  return (
    <>
      <CompactButton appearance="stroke" aria-label="Close">
        <Icon icon={RiCloseLine} />
      </CompactButton>
      <CompactButton appearance="ghost" aria-label="Settings">
        <Icon icon={RiSettings3Line} />
      </CompactButton>
      <CompactButton appearance="error" aria-label="Delete">
        <Icon icon={RiCloseLine} />
      </CompactButton>
    </>
  )
}