nili/ui
enfaartr
كل المكوّنات

Alert

عرض شامل
١١ تصدير٧ محور تنويع١٧ خاصيّة٤ ملف
import { Alert, AlertAction } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

الحالات

خمسة معانٍ. تُعلَن error بحزم افتراضيًا، أما البقية فتنتظر توقّفًا.

هذا تنبيه error.
هذا تنبيه warning.
هذا تنبيه success.
هذا تنبيه info.
هذا تنبيه feature.
import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert status="error" title="Something went wrong." />
      <Alert status="warning" title="Your trial ends in 3 days." />
      <Alert status="success" title="Payment received." />
      <Alert status="info" title="A new version is available." />
      <Alert status="feature" title="Try the new dashboard." />
    </>
  )
}

المظاهر

filled وlight وlighter وstroke. الأعلى صوتًا هو filled — احتفظ به لما يقاطع المستخدم فعلًا.

المظهر: filled
المظهر: light
المظهر: lighter
المظهر: stroke
import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert appearance="filled" status="info" title="Filled" />
      <Alert appearance="light" status="info" title="Light" />
      <Alert appearance="lighter" status="info" title="Lighter" />
      <Alert appearance="stroke" status="info" title="Stroke" />
    </>
  )
}

الأحجام

الحجم x-small سطر واحد بلا حشوة للأيقونة؛ أما large فيحمل وصفًا وإجراءات.

x-small
تم حفظ تغييراتك.
small
تم حفظ تغييراتك.
large
تم حفظ تغييراتك.

يمكن لكل أعضاء الفريق رؤيتها الآن.

import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert size="x-small" status="success" title="Saved." />
      <Alert size="small" status="success" title="Saved." />
      <Alert
        size="large"
        status="success"
        title="Saved."
        description="Your changes are live for everyone on the team."
      />
    </>
  )
}

الإجراءات والأيقونات والإغلاق

يقبل actions إجراءين داخليين على الأكثر. ويقبل icon القيمة true للأيقونة الافتراضية، أو عنصرًا يحل محلها، أو false لإزالتها. ويحتاج dismissible إلى dismissLabel — فعلامة ✕ بلا اسم وصفي.

Your plan is almost full.

You have used 92% of your storage.

ترقيةاعرف المزيد
Introducing smart filters.
بلا أي أيقونة.
أغلقني.
import { Alert, Icon } from "@nili/ui"
import { RiSparkling2Line } from "@remixicon/react"

export function Example() {
  const [open, setOpen] = useState(true)

  return (
    <>
      <Alert
        status="warning"
        appearance="stroke"
        size="large"
        title={t('actions.planTitle')}
        description={t('actions.planBody')}
        actions={[
          { label: "Upgrade", href: "#" },
          { label: "Dismiss", onClick: () => setOpen(false) },
        ]}
        dismissible
        dismissLabel={t('close')}
        onDismiss={() => setOpen(false)}
      />

      {/* Custom icon */}
      <Alert
        status="feature"
        title={t('actions.feature')}
        icon={<Icon icon={RiSparkling2Line} />}
      />

      {/* No icon */}
      <Alert status="info" title="No icon." icon={false} />
    </>
  )
}