Skip to Content
ComponentsAlert

Alert

Overview

Alert is a design-system component intended for reusable, product-agnostic UI composition.

Import

import { Alert, AlertTitle, AlertDescription, alertVariants } from "@tesseract-nexus/tesserix-ui"

Exports

export { Alert, AlertTitle, AlertDescription, alertVariants } from './alert'

Props

No dedicated Props interface found in this module. Refer to exported types and composed primitive props.

Variations

const alertVariants = cva(
  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground border-border",
        destructive:
          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10",
        success:
          "border-green-500/50 text-green-900 dark:text-green-400 dark:border-green-500 [&>svg]:text-green-600 bg-green-50 dark:bg-green-950",
        warning:
          "border-yellow-500/50 text-yellow-900 dark:text-yellow-400 dark:border-yellow-500 [&>svg]:text-yellow-600 bg-yellow-50 dark:bg-yellow-950",
        info:
          "border-primary/50 text-primary dark:border-primary [&>svg]:text-primary bg-primary/10",
      },
    },
    defaultVariants: {

Usage Patterns

Basic

import { Alert, AlertTitle, AlertDescription, alertVariants } from "@tesseract-nexus/tesserix-ui"
 
export function Example() {
  return <Alert />
}

Do / Don’t

Do

// Compose with domain wrappers in product code
<Alert className="w-full" />

Don’t

// Avoid one-off hardcoded values that bypass tokens
<Alert className="bg-[#123456] text-[#fafafa] px-[13px]" />

Token / Theming Mapping

  • Color tokens: —primary, —secondary, —muted, —destructive, —foreground, —background
  • Shape tokens: —radius
  • Border/input tokens: —border, —input, —ring
  • Spacing and typography: Tailwind scale via design-system preset

Interaction Test Checklist

  1. Interaction: click/keyboard activation for primary paths.
  2. Focus: visible focus styles and logical tab order.
  3. Variants: core variants and sizes render correctly.
  4. Disabled/error states: behavior and ARIA attributes are correct.
  5. Regression: Storybook visual check for primary states.

Accessibility

  • Verify keyboard behavior for all interactive states.
  • Ensure labels and semantic roles are present in consuming screens.
  • Validate focus treatment and screen-reader output during QA.
AccordionApp Shell