YA Section Message

The YaSectionMessage is the inline callout component of the YaVendio Design System. Based on shadcn Alert, it provides semantic intent variants for different message types: neutral, discovery, info, success, warning, and destructive.

Supports an optional icon (any SVG), title, description, and actions area for contextual user guidance.

Quick Start

pnpm dlx shadcn@latest add @yavendio/ya-section-message

npx shadcn@latest add @yavendio/ya-section-message

yarn dlx shadcn@latest add @yavendio/ya-section-message

import {
  YaSectionMessage,
  YaSectionMessageTitle,
  YaSectionMessageDescription,
  YaSectionMessageActions,
} from '@/components/ui/ya-section-message'

Intents

Use the intent prop to set the semantic color scheme. Each intent conveys a different type of message.

Destructive

Use the destructive prop for error states. This overrides any intent value with red-clay tokens.

With Actions

Use YaSectionMessageActions to add action buttons below the description.

Without Icon

Omit the SVG child to render without an icon. The grid automatically collapses the icon column.

Without Title

Omit YaSectionMessageTitle for description-only messages.

All Intents

All available intents and the destructive override displayed together.

Props

YaSectionMessage

Renders a <div> with role="alert". Accepts all standard div HTML attributes.

YaSectionMessageTitle

Renders a <div> for the message title. Placed in grid column 2.

YaSectionMessageDescription

Renders a <div> for the message description. Placed in grid column 2.

YaSectionMessageActions

Renders a <div> flex container for action elements. Placed in grid column 2.

Accessibility

• The root element uses role="alert" to announce content to screen readers.
• Icon is decorative; ensure meaningful content is conveyed via title and description text.
• Action buttons should have descriptive labels for assistive technology.