feat(alert): added AlertAction component

[Inv1x]

Summary

• Add AlertAction component to display actions (buttons, badges) within alerts
• Implement responsive behavior: stacks at bottom on mobile, absolute positioned on desktop
• Update documentation with new example

Changes

• Add AlertAction component with data-slot="alert-action"
• Responsive layout using sm: breakpoint
• Add alert-action example demonstrating usage with buttons and badges

Usage

<Alert>
  <MailIcon />
  <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
  <AlertAction>
    <Button size="sm" variant="outline">Undo</Button>
  </AlertAction>
</Alert>

Examples:

[vercel]

@Inv1x is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

This PR adds an AlertAction component to display action elements (buttons, badges) within alerts. The component implements responsive behavior that stacks actions at the bottom on mobile and positions them absolutely on the right side at desktop breakpoints.

Key Changes:

• New AlertAction component with data-slot="alert-action" attribute
• Responsive layout using sm: breakpoint for mobile-first design
• Updates to Alert base styles to accommodate the action component with conditional padding

Reviewed changes

Copilot reviewed 25 out of 38 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
apps/v4/registry/new-york-v4/ui/alert.tsx	Adds AlertAction component and updates Alert styles for responsive action positioning
apps/v4/registry/new-york-v4/examples/alert-action.tsx	New example demonstrating AlertAction with buttons and badges
apps/v4/registry/new-york-v4/examples/_registry.ts	Registers the new alert-action example
apps/v4/registry/__index__.tsx	Auto-generated index including the new example
apps/v4/public/r/styles/*/vercel.json	Auto-generated JSON files (no actionable changes)
apps/v4/public/r/styles/*/github.json	Auto-generated JSON files (no actionable changes)
apps/v4/public/r/styles/new-york-v4/registry.json	Adds alert-action example to registry
apps/v4/public/r/styles/new-york-v4/alert.json	Updates alert component with AlertAction export
apps/v4/public/r/styles/new-york-v4/alert-action.json	New registry entry for alert-action example
apps/v4/content/docs/components/alert.mdx	Documentation updates showing AlertAction usage

The implementation looks solid with proper responsive design patterns and clear documentation. No critical issues were identified during the review.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[diffray-bot]

Changes Summary

This PR adds a new AlertAction component to the shadcn/ui Alert component, allowing users to display action buttons or badges within alerts. The component implements responsive behavior - stacking below content on mobile and absolute positioning on the right side on desktop (sm: breakpoint). The change includes documentation updates, registry entries, and example code.

Type: feature

Components Affected: Alert, AlertAction

Architecture Impact

• New Patterns: Responsive positioning pattern using CSS absolute positioning at sm: breakpoint, data-slot attribute pattern for child detection
• Coupling: Alert component now uses has-data selector to detect AlertAction child and adjust padding accordingly

Risk Areas: CSS grid layout complexity - the AlertAction positioning relies on grid column placement which could conflict with existing alert content structure, Absolute positioning on desktop (sm:) may cause overlap issues with long alert titles or when multiple actions are present, Fixed pr-20 padding may not accommodate all action content widths

Suggestions

• Consider adding accessibility attributes (aria-label) to AlertAction for screen readers
• Test with varying action content widths to ensure pr-20 is sufficient or consider dynamic width handling
• Consider adding prop for action alignment flexibility (e.g., inline with title vs bottom)

_{Full review in progress... | Powered by diffray}

[diffray-bot]

Review Summary

Free public review - Want AI code reviews on your PRs? Check out diffray.ai

Validated 6 issues: 1 kept (medium - valid accessibility concern about role='alert'), 5 filtered (low value - don't match project conventions or are low impact)

Issues Found: 1

📋 Full issue list (click to expand)

🟡 MEDIUM - Alert component always uses role="alert" which may be too assertive

Category: quality

File: apps/v4/registry/new-york-v4/ui/alert.tsx:30

Description: The Alert component hardcodes role="alert" which implies aria-live="assertive". This is appropriate for urgent error messages but may be too aggressive for informational status updates.

Suggestion: Consider adding a variant prop to allow choosing between role="alert" (for urgent messages like errors) and role="status" (for informational updates like success confirmations). The role could default based on the variant - destructive variants use role="alert", while default variants use role="status".

Confidence: 70%

Rule: fe_aria_live_regions

---

_{Powered by diffray - Multi-Agent Code Review Agent}