Alert

Static message container for persistent inline feedback.

المتصفحات: Chrome 123+Firefox 121+Safari 17.5+
الفئة: 0
الحجم المضغوط: 387 B
ميزانية التخطيط القسري: 0 ms
ميزانية axe: 0
متوافق مع SSR: نعم
العقد المنشور: بيئة الاختبار

المختبر

Alert

Warning: browser support is incomplete.

Check the support matrix before release.

React

CSS

Tailwind

import { Alert, AlertDescription, AlertTitle } from "@gunkin/uiify";

export default function Example() {
  return (
    <Alert className="" variant="warning">
      <AlertTitle className="">Warning: browser support is incomplete.</AlertTitle>
      <AlertDescription className="">Check the support matrix before release.</AlertDescription>
    </Alert>
  );
}

@layer components {
  :where([data-uiify-alert]) {
    --uiify-alert-tone: var(--muted-foreground);

    position: relative;
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-1);
    corner-shape: round;
    background: var(--card);
    color: var(--card-foreground);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  :where([data-uiify-alert][data-variant="success"]) {
    --uiify-alert-tone: var(--success);
  }

  :where([data-uiify-alert][data-variant="warning"]) {
    --uiify-alert-tone: var(--warning);
  }

  :where([data-uiify-alert][data-variant="destructive"]) {
    --uiify-alert-tone: var(--destructive);
  }

  :where([data-uiify-alert]:has(> [data-part="symbol"])) {
    padding-inline-start: 2.75rem;
  }

  :where([data-uiify-alert]) > [data-part="symbol"] {
    position: absolute;
    inset-block-start: 0.875rem;
    inset-inline-start: 1rem;
    display: grid;
    place-items: center;
    inline-size: 1rem;
    block-size: 1rem;
    color: color-mix(in oklab, var(--uiify-alert-tone) 65%, var(--card-foreground));
    font-size: 1rem;
    line-height: 1;
  }

  :where([data-uiify-alert-title]) {
    margin: 0;
    font-size: inherit;
    font-weight: var(--weight-semibold);
    line-height: inherit;
  }

  :where([data-uiify-alert-description]) {
    margin: 0;
    color: var(--muted-foreground);
    font-size: inherit;
    line-height: 1.5;
  }

  :where([data-uiify-alert-title] + [data-uiify-alert-description]) {
    margin-block-start: 0.25rem;
  }

  :where([data-uiify-alert-description]) > p {
    margin: 0;
  }

  :where([data-uiify-alert-description]) > p + p {
    margin-block-start: 0.5rem;
  }
}

import { Alert, AlertDescription, AlertTitle } from "@gunkin/uiify";

export default function Example() {
  return (
    <Alert
      className="
        [--uiify-alert-tone:var(--muted-foreground)] relative block box-border [inline-size:100%] [min-inline-size:0]
        [padding-block:0.75rem] [padding-inline:1rem] border-[length:var(--border-width)] border-solid border-border
        [border-radius:var(--radius-1)] [corner-shape:round] bg-card text-card-foreground text-sm leading-5
        [overflow-wrap:anywhere] text-pretty [&[data-variant=success]]:[--uiify-alert-tone:var(--success)]
        [&[data-variant=warning]]:[--uiify-alert-tone:var(--warning)]
        [&[data-variant=destructive]]:[--uiify-alert-tone:var(--destructive)]
        [&:has(>[data-part=symbol])]:[padding-inline-start:2.75rem] [&>[data-part=symbol]]:absolute
        [&>[data-part=symbol]]:[inset-block-start:0.875rem] [&>[data-part=symbol]]:[inset-inline-start:1rem]
        [&>[data-part=symbol]]:grid [&>[data-part=symbol]]:place-items-center [&>[data-part=symbol]]:[inline-size:1rem]
        [&>[data-part=symbol]]:[block-size:1rem]
        [&>[data-part=symbol]]:[color:color-mix(in_oklab,_var(--uiify-alert-tone)_65%,_var(--card-foreground))]
        [&>[data-part=symbol]]:[font-size:1rem] [&>[data-part=symbol]]:leading-none
      "
      variant="warning"
    >
      <AlertTitle
        className="
          m-0 text-[length:inherit] font-[number:var(--weight-semibold)] leading-[inherit]
          [&+[data-uiify-alert-description]]:[margin-block-start:0.25rem]
        "
      >
        Warning: browser support is incomplete.
      </AlertTitle>
      <AlertDescription
        className="
          m-0 text-muted-foreground text-[length:inherit] [line-height:1.5]
          [:where([data-uiify-alert-title]+&)]:[margin-block-start:0.25rem] [&>p]:m-0
          [&>p+p]:[margin-block-start:0.5rem]
        "
      >
        Check the support matrix before release.
      </AlertDescription>
    </Alert>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[--uiify-alert-tone:var(--muted-foreground)] relative block box-border [inline-size:100%] [min-inline-size:0] [padding-block:0.75rem] [padding-inline:1rem] border-[length:var(--border-width)] border-solid border-border [border-radius:var(--radius-1)] [corner-shape:round] bg-card text-card-foreground text-sm leading-5 [overflow-wrap:anywhere] text-pretty [&[data-variant=success]]:[--uiify-alert-tone:var(--success)] [&[data-variant=warning]]:[--uiify-alert-tone:var(--warning)] [&[data-variant=destructive]]:[--uiify-alert-tone:var(--destructive)] [&:has(>[data-part=symbol])]:[padding-inline-start:2.75rem] [&>[data-part=symbol]]:absolute [&>[data-part=symbol]]:[inset-block-start:0.875rem] [&>[data-part=symbol]]:[inset-inline-start:1rem] [&>[data-part=symbol]]:grid [&>[data-part=symbol]]:place-items-center [&>[data-part=symbol]]:[inline-size:1rem] [&>[data-part=symbol]]:[block-size:1rem] [&>[data-part=symbol]]:[color:color-mix(in_oklab,_var(--uiify-alert-tone)_65%,_var(--card-foreground))] [&>[data-part=symbol]]:[font-size:1rem] [&>[data-part=symbol]]:leading-none m-0 text-[length:inherit] font-[number:var(--weight-semibold)] leading-[inherit] [&+[data-uiify-alert-description]]:[margin-block-start:0.25rem] text-muted-foreground [line-height:1.5] [:where([data-uiify-alert-title]+&)]:[margin-block-start:0.25rem] [&>p]:m-0 [&>p+p]:[margin-block-start:0.5rem]');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

أمثلة

Outcome messages

The variant provides the status symbol and accent; keep the meaning clear in the title and description.

Payment successful

Your payment has been processed successfully.

Upload failed

Check your connection and try again.

Action needs review

Check the support matrix before release.

Update available

Review the latest changes in this release.

import { Alert, AlertDescription, AlertTitle } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Alert variant="success">
        <AlertTitle>Payment successful</AlertTitle>
        <AlertDescription>Your payment has been processed successfully.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Upload failed</AlertTitle>
        <AlertDescription>Check your connection and try again.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <AlertTitle>Action needs review</AlertTitle>
        <AlertDescription>Check the support matrix before release.</AlertDescription>
      </Alert>
      <Alert variant="secondary">
        <AlertTitle>Update available</AlertTitle>
        <AlertDescription>Review the latest changes in this release.</AlertDescription>
      </Alert>
    </>
  );
}

API

`Alert`

الخاصية	النوع	افتراضي	الوصف
`children`	`ReactNode`	—	AlertTitle, AlertDescription, or custom message content.
`variant`	`"secondary" \| "success" \| "warning" \| "destructive"`	`"secondary"`	Visual meaning written to data-variant; keep severity understandable in text.
`symbol`	`string \| false`	`ⓘ / ✓ / ⚠︎ / ×`	Override the decorative text symbol, or pass false to hide it. The default comes from variant.
`as`	`ElementType`	`"div"`	Native element or component used for the root.
`role`	`"status" \| "alert"`	—	Choose a live role only when message timing and urgency warrant announcement.
`className`	`string`	—	الفئة المطبّقة على العنصر الجذر.
`style`	`CSSProperties`	—	Native root styles.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the rendered root element.
`render`	`(props, state) => ReactElement \| null`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

`AlertTitle`

الخاصية	النوع	افتراضي	الوصف
`children`	`ReactNode`	—	Content rendered by this alert part.
`as`	`ElementType`	`"div"`	Native element or component used for the root.
`className / style / ref / native props`	`native div props`	—	Native element props, styles, events, and ref are forwarded.
`render`	`(props, state) => ReactElement \| null`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

`AlertDescription`

الخاصية	النوع	افتراضي	الوصف
`children`	`ReactNode`	—	Content rendered by this alert part.
`as`	`ElementType`	`"div"`	Native element or component used for the root.
`className / style / ref / native props`	`native div props`	—	Native element props, styles, events, and ref are forwarded.
`render`	`(props, state) => ReactElement \| null`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

لوحة المفاتيح

المفتاح	الإجراء

إمكانية الوصول

Persistent inline message with no live role by default. Add role=status or role=alert only when a dynamic update's timing and urgency warrant announcement.

نقاط التنسيق

data-uiify-alertdata-uiify-alert-titledata-uiify-alert-descriptiondata-part="symbol|title|description"data-variant

إطار العمل

التنسيق

المظهر

اللغة

Alert

المختبر

Alert

أمثلة

Outcome messages

API

`Alert`

`AlertTitle`

`AlertDescription`

لوحة المفاتيح

إمكانية الوصول

نقاط التنسيق