refactor(alert): replace Alert.Dismiss with dismissible prop and reposition action below text

IzumiSy · IzumiSy · commit 6e9067030c58 · 2026-06-04T16:52:54.000+09:00
- Remove Alert.Dismiss compound component and useAlertDismiss hook
- Add dismissible and onDismiss props to Alert.Root
- Move action slot from right side (col-start-3) to below description (col-start-2)
- Position dismiss button on the right side (col-start-3) for vertical space efficiency
- Update examples and tests to use new API
diff --git a/examples/nextjs-app/src/modules/pages/primitives-demo.tsx b/examples/nextjs-app/src/modules/pages/primitives-demo.tsx
@@ -188,13 +188,14 @@ export const primitiveComponentsDemoResource = defineResource({
                       gap: "0.5rem",
                     }}
                   >
-                    <Alert.Root variant="info" action={<Alert.Dismiss />}>
+                    <Alert.Root variant="info" dismissible>
                       <Alert.Title>Dismissible</Alert.Title>
                       <Alert.Description>This alert can be dismissed.</Alert.Description>
                     </Alert.Root>
                     <Alert.Root
                       variant="success"
-                      action={<Alert.Dismiss onDismiss={() => console.log("dismissed")} />}
+                      dismissible
+                      onDismiss={() => console.log("dismissed")}
                     >
                       <Alert.Title>With callback</Alert.Title>
                       <Alert.Description>Dismiss fires a callback.</Alert.Description>
diff --git a/packages/core/__snapshots__/src__components__alert.test.tsx.snap b/packages/core/__snapshots__/src__components__alert.test.tsx.snap
@@ -10,4 +10,4 @@ exports[`Alert > snapshots > success variant 1`] = `"<div data-slot="alert" role
 
 exports[`Alert > snapshots > warning variant 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)*4.5)_1fr_auto] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&amp;>svg]:size-[17.5px] astw:[&amp;>svg]:self-center astw:[&amp;>svg]:shrink-0 astw:[&amp;>svg]:text-current astw:bg-yellow-500/10 astw:text-yellow-700 astw:border-yellow-500/20 dark:astw:text-yellow-500 *:data-[slot=alert-description]:astw:text-yellow-700/80 dark:*:data-[slot=alert-description]:astw:text-yellow-500/80"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Warning</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&amp;_p]:astw:leading-relaxed">Be careful</div></div>"`;
 
-exports[`Alert > snapshots > with action 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)*4.5)_1fr_auto] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&amp;>svg]:size-[17.5px] astw:[&amp;>svg]:self-center astw:[&amp;>svg]:shrink-0 astw:[&amp;>svg]:text-current astw:bg-secondary astw:text-secondary-foreground astw:border-border *:data-[slot=alert-description]:astw:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Dismissible</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&amp;_p]:astw:leading-relaxed">This can be dismissed</div><div data-slot="alert-action" class="astw:col-start-3 astw:row-span-full astw:flex astw:items-center astw:self-center"><button data-slot="alert-dismiss" type="button" class="astw:inline-flex astw:items-center astw:justify-center astw:rounded-md astw:p-1 astw:opacity-70 astw:transition-opacity hover:astw:opacity-100 focus-visible:astw:outline-none focus-visible:astw:ring-2 focus-visible:astw:ring-ring" aria-label="Dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x astw:size-4" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div></div>"`;
+exports[`Alert > snapshots > with dismissible 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)*4.5)_1fr_auto] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&amp;>svg]:size-[17.5px] astw:[&amp;>svg]:self-center astw:[&amp;>svg]:shrink-0 astw:[&amp;>svg]:text-current astw:bg-secondary astw:text-secondary-foreground astw:border-border *:data-[slot=alert-description]:astw:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Dismissible</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&amp;_p]:astw:leading-relaxed">This can be dismissed</div><button data-slot="alert-dismiss" type="button" class="astw:col-start-3 astw:row-span-full astw:self-center astw:inline-flex astw:items-center astw:justify-center astw:rounded-md astw:p-1 astw:opacity-70 astw:transition-opacity hover:astw:opacity-100 focus-visible:astw:outline-none focus-visible:astw:ring-2 focus-visible:astw:ring-ring" aria-label="Dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x astw:size-4" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div>"`;
diff --git a/packages/core/src/components/alert.test.tsx b/packages/core/src/components/alert.test.tsx
@@ -59,9 +59,9 @@ describe("Alert", () => {
       expect(container.innerHTML).toMatchSnapshot();
     });
 
-    it("with action", () => {
+    it("with dismissible", () => {
       const { container } = render(
-        <Alert.Root action={<Alert.Dismiss />}>
+        <Alert.Root dismissible>
           <Alert.Title>Dismissible</Alert.Title>
           <Alert.Description>This can be dismissed</Alert.Description>
         </Alert.Root>,
@@ -92,11 +92,11 @@ describe("Alert", () => {
     expect(alert.className).toContain("astw:mt-4");
   });
 
-  it("dismisses when Alert.Dismiss is clicked", async () => {
+  it("dismisses when dismissible button is clicked", async () => {
     const user = userEvent.setup();
     const onDismiss = vi.fn();
     render(
-      <Alert.Root action={<Alert.Dismiss onDismiss={onDismiss} />}>
+      <Alert.Root dismissible onDismiss={onDismiss}>
         <Alert.Title>Dismissible</Alert.Title>
       </Alert.Root>,
     );
diff --git a/packages/core/src/components/alert.tsx b/packages/core/src/components/alert.tsx
@@ -43,43 +43,61 @@ const variantIcons: Record<
   info: InfoIcon,
 };
 
-const AlertDismissContext = React.createContext<(() => void) | null>(null);
-
 type RootProps = React.ComponentProps<"div"> &
   VariantProps<typeof alertVariants> & {
     action?: React.ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
   };
 
-function Root({ className, variant = "neutral", action, children, ...props }: RootProps) {
+function Root({
+  className,
+  variant = "neutral",
+  action,
+  dismissible,
+  onDismiss,
+  children,
+  ...props
+}: RootProps) {
   const [visible, setVisible] = React.useState(true);
   const Icon = variantIcons[variant ?? "neutral"];
 
-  const dismiss = React.useCallback(() => {
+  const handleDismiss = React.useCallback(() => {
     setVisible(false);
-  }, []);
+    onDismiss?.();
+  }, [onDismiss]);
 
   if (!visible) return null;
 
   return (
-    <AlertDismissContext.Provider value={dismiss}>
-      <div
-        data-slot="alert"
-        role="alert"
-        className={cn(alertVariants({ variant }), className)}
-        {...props}
-      >
-        <Icon />
-        {children}
-        {action && (
-          <div
-            data-slot="alert-action"
-            className="astw:col-start-3 astw:row-span-full astw:flex astw:items-center astw:self-center"
-          >
-            {action}
-          </div>
-        )}
-      </div>
-    </AlertDismissContext.Provider>
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    >
+      <Icon />
+      {children}
+      {action && (
+        <div
+          data-slot="alert-action"
+          className="astw:col-start-2 astw:flex astw:items-center astw:gap-2 astw:mt-2"
+        >
+          {action}
+        </div>
+      )}
+      {dismissible && (
+        <button
+          data-slot="alert-dismiss"
+          type="button"
+          onClick={handleDismiss}
+          className="astw:col-start-3 astw:row-span-full astw:self-center astw:inline-flex astw:items-center astw:justify-center astw:rounded-md astw:p-1 astw:opacity-70 astw:transition-opacity hover:astw:opacity-100 focus-visible:astw:outline-none focus-visible:astw:ring-2 focus-visible:astw:ring-ring"
+          aria-label="Dismiss"
+        >
+          <XIcon className="astw:size-4" />
+        </button>
+      )}
+    </div>
   );
 }
 Root.displayName = "Alert.Root";
@@ -112,48 +130,6 @@ function Description({ className, ...props }: React.ComponentProps<"div">) {
 }
 Description.displayName = "Alert.Description";
 
-type DismissProps = Omit<React.ComponentProps<"button">, "onClick"> & {
-  onDismiss?: () => void;
-};
-
-function Dismiss({ className, onDismiss, ...props }: DismissProps) {
-  const dismiss = React.useContext(AlertDismissContext);
-
-  const handleClick = React.useCallback(() => {
-    dismiss?.();
-    onDismiss?.();
-  }, [dismiss, onDismiss]);
-
-  return (
-    <button
-      data-slot="alert-dismiss"
-      type="button"
-      onClick={handleClick}
-      className={cn(
-        "astw:inline-flex astw:items-center astw:justify-center astw:rounded-md astw:p-1 astw:opacity-70 astw:transition-opacity hover:astw:opacity-100 focus-visible:astw:outline-none focus-visible:astw:ring-2 focus-visible:astw:ring-ring",
-        className,
-      )}
-      aria-label="Dismiss"
-      {...props}
-    >
-      <XIcon className="astw:size-4" />
-    </button>
-  );
-}
-Dismiss.displayName = "Alert.Dismiss";
-
-/**
- * Returns the dismiss function for the nearest `Alert.Root`.
- * @throws {Error} if called outside an `Alert.Root` tree.
- */
-export function useAlertDismiss() {
-  const dismiss = React.useContext(AlertDismissContext);
-  if (!dismiss) {
-    throw new Error("useAlertDismiss must be used within an Alert.Root");
-  }
-  return dismiss;
-}
-
 export type AlertProps = RootProps;
-export const Alert = { Root, Title, Description, Dismiss };
+export const Alert = { Root, Title, Description };
 export { alertVariants };
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -83,7 +83,7 @@ export { useToast } from "./hooks/use-toast";
 export { useOverrideBreadcrumb } from "./hooks/use-override-breadcrumb";
 
 // Components
-export { Alert, alertVariants, useAlertDismiss, type AlertProps } from "./components/alert";
+export { Alert, alertVariants, type AlertProps } from "./components/alert";
 export { Badge, badgeVariants, type BadgeProps } from "./components/badge";
 export type { BadgeVariant, BadgeOptions } from "./components/badge-list";
 export { DescriptionCard, type DescriptionCardProps } from "./components/description-card";

Original file line number	Diff line number	Diff line change
@@ -10,4 +10,4 @@ exports[`Alert > snapshots > success variant 1`] = `"<div data-slot="alert" role
`10`	`10`
`11`	`11`	exports[`Alert > snapshots > warning variant 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)4.5)_1fr_auto] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&>svg]:size-[17.5px] astw:[&>svg]:self-center astw:[&>svg]:shrink-0 astw:[&>svg]:text-current astw:bg-yellow-500/10 astw:text-yellow-700 astw:border-yellow-500/20 dark:astw:text-yellow-500 :data-[slot=alert-description]:astw:text-yellow-700/80 dark:*:data-[slot=alert-description]:astw:text-yellow-500/80"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Warning</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&_p]:astw:leading-relaxed">Be careful</div></div>"`;
`12`	`12`
`13`		-exports[`Alert > snapshots > with action 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)4.5)_1fr_auto] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&>svg]:size-[17.5px] astw:[&>svg]:self-center astw:[&>svg]:shrink-0 astw:[&>svg]:text-current astw:bg-secondary astw:text-secondary-foreground astw:border-border :data-[slot=alert-description]:astw:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Dismissible</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&_p]:astw:leading-relaxed">This can be dismissed</div><div data-slot="alert-action" class="astw:col-start-3 astw:row-span-full astw:flex astw:items-center astw:self-center"><button data-slot="alert-dismiss" type="button" class="astw:inline-flex astw:items-center astw:justify-center astw:rounded-md astw:p-1 astw:opacity-70 astw:transition-opacity hover:astw:opacity-100 focus-visible:astw:outline-none focus-visible:astw:ring-2 focus-visible:astw:ring-ring" aria-label="Dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x astw:size-4" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div></div>"`;
	`13`	+exports[`Alert > snapshots > with dismissible 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)4.5)_1fr_auto] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&>svg]:size-[17.5px] astw:[&>svg]:self-center astw:[&>svg]:shrink-0 astw:[&>svg]:text-current astw:bg-secondary astw:text-secondary-foreground astw:border-border :data-[slot=alert-description]:astw:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Dismissible</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&_p]:astw:leading-relaxed">This can be dismissed</div><button data-slot="alert-dismiss" type="button" class="astw:col-start-3 astw:row-span-full astw:self-center astw:inline-flex astw:items-center astw:justify-center astw:rounded-md astw:p-1 astw:opacity-70 astw:transition-opacity hover:astw:opacity-100 focus-visible:astw:outline-none focus-visible:astw:ring-2 focus-visible:astw:ring-ring" aria-label="Dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x astw:size-4" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div>"`;