feat(alert): trailing action slot (0.6.1)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mirrorstack-ai/web-ui-kit",
   "packageManager": "pnpm@10.29.3",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {

src/components/ui/feedback/alert/Alert.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Alert, type AlertVariant } from "./Alert";
+import { Button } from "@/components/ui/actions/button/Button";
 
 const meta: Meta<typeof Alert> = {
   title: "UI/Feedback/Alert",
@@ -50,6 +51,19 @@ export const Dismissible: Story = {
   },
 };
 
+export const WithAction: Story = {
+  args: {
+    variant: "warning",
+    title: "Update available",
+    children: "Version 1.4.0 is ready to install.",
+    action: (
+      <Button variant="filled" color="warning" size="sm">
+        Update
+      </Button>
+    ),
+  },
+};
+
 export const WithCustomIcon: Story = {
   args: {
     variant: "primary",

src/components/ui/feedback/alert/Alert.test.tsx

@@ -42,6 +42,15 @@ describe("Alert", () => {
     expect(screen.queryByLabelText("Dismiss")).not.toBeInTheDocument();
   });
 
+  it("renders the action node when provided", () => {
+    render(
+      <Alert variant="warning" title="Update available" action={<button>Update</button>}>
+        Version 1.4.0 is ready.
+      </Alert>,
+    );
+    expect(screen.getByRole("button", { name: "Update" })).toBeInTheDocument();
+  });
+
   it("applies custom className", () => {
     render(
       <Alert variant="success" className="mt-4">

src/components/ui/feedback/alert/Alert.tsx

@@ -7,7 +7,7 @@ import { IconButton } from "@/components/ui/actions/icon-button/IconButton";
 export const meta: ComponentMeta = {
   name: "Alert",
   description:
-    "Dismissible inline alert banner with error/success/warning/primary/secondary variants",
+    "Dismissible inline alert banner with error/success/warning/primary/secondary variants and an optional trailing action slot",
 };
 
 export type AlertVariant =
@@ -30,6 +30,9 @@ export interface AlertProps {
   /** Hide the leading icon entirely. Useful when the alert sits inside a
    * dialog or section that already conveys severity. */
   hideIcon?: boolean;
+  /** Optional trailing action (e.g. a Button), vertically centered against the
+   * whole banner. Sits before the dismiss control when both are present. */
+  action?: ReactNode;
 }
 
 const variantStyles: Record<AlertVariant, string> = {
@@ -57,6 +60,7 @@ export function Alert({
   icon,
   iconSize,
   hideIcon,
+  action,
 }: AlertProps) {
   return (
     <div
@@ -79,6 +83,7 @@ export function Alert({
           {title && <h3 className="text-sm font-medium">{title}</h3>}
           <div className={cn("text-sm", title && "mt-1.5")}>{children}</div>
         </div>
+        {action && <div className="ml-3 shrink-0">{action}</div>}
         {onDismiss && (
           <IconButton
             icon="close"