Alert

󰕺

Contract-aligned preview

Live Alert (info) — visual layer via recipe + React.

󰔢

Action

Contract

Overview

Machine-readable contract from Component Spec.

component: alertexport: Alertversion: 1recipe: alerttokens.visual: alertattributes: data-refineui=alert, data-variant=variant

Anatomy

Part	data-refineui
root	alert
icon	alert-icon
content	alert-content
row	alert-row
body	alert-body
title	alert-title
description	alert-description
actions	alert-actions
action	alert-action
close	alert-close

Variants

Axis	Values
variant	default, info, success, warning, danger, custom

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir, prefers-contrast
alert	pseudo	focus-visible

Accessibility

Slot	Element	Role
alert	div	alert

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Variant

Select...󰯑

󰕺

Contract-aligned preview

Live Alert (info) — visual layer via recipe + React.

󰔢

Action

Recipe → Tokens

Slot bindings for variant="info" — declared in alert.recipe.ts.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
root	—	background	alert.background	backgroundPrimary	neutralWhite	neutral900	bg-refineui-alias-background-primary
root	—	border	alert.border	borderDefault	neutral300	neutral650	border-refineui-alias-border-default
icon	info	foreground	semantic.foregroundInfo	foregroundInfo	blue700	blue200	text-refineui-alias-foreground-info
title	info	foreground	semantic.foregroundInfo	foregroundInfo	blue700	blue200	text-refineui-alias-foreground-info
description	info	foreground	semantic.backgroundInfo	backgroundInfo	blue500	blue500	text-refineui-alias-background-info

Component token trace

All paths in token-trace-v2.json prefixed with alert.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
alert.accent.default	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
alert.background	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
alert.border	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
alert.description.default	foregroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4
alert.title	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import {
  Alert,
  AlertIcon,
  AlertRow,
  AlertBody,
  AlertTitle,
  AlertDescription,
  AlertClose,
  AlertActions,
  AlertAction,
} from "@refineui/react";

<Alert variant="warning">
  <AlertRow>
    <AlertIcon />
    <AlertBody>
      <AlertTitle>Warning</AlertTitle>
      <AlertDescription>Review before continuing.</AlertDescription>
    </AlertBody>
    <AlertClose type="button" />
  </AlertRow>
  <AlertActions>
    <AlertAction type="button">Review</AlertAction>
  </AlertActions>
</Alert>

Contract source: packages/react/spec/components/alert.json — rendered by SpecRenderer above.

Token trace source: packages/react/dist/spec/token-trace-v2.json + packages/tokens/dist/spec/trace-v2.json.