{"name":"alert","title":"Alert","description":"Displays a callout for user attention.","installCommand":"bunx marko-ui add alert -y","usageTags":", , ","importSnippet":"import Alert from \"@/components/ui/alert/alert.marko\";\nimport AlertTitle from \"@/components/ui/alert/title.marko\";\nimport AlertDescription from \"@/components/ui/alert/description.marko\";\nimport AlertAction from \"@/components/ui/alert/action.marko\";","usageSnippet":"\n \n Heads up!\n \n You can add components and dependencies to your app using the CLI.\n \n \n \n \n","tags":["Alert","AlertAction","AlertDescription","AlertTitle"],"parts":[],"props":[{"name":"variant","type":"'default' | 'destructive' | null | undefined","required":false,"default":"default"}],"events":[],"keyboard":[],"accessibilityNotes":["`Alert` renders with `role=\"alert\"`, so assistive technology announces its content as soon as it mounts — reserve it for messages the user genuinely needs to know about immediately, not routine or decorative content.","`role=\"alert\"` implies an assertive live region: screen readers interrupt their current announcement to read it. For less urgent, non-interrupting updates use a `role=\"status\"` region instead of `Alert`.","The component is a static callout, not a dialog — it has no focus management and no keyboard interaction of its own. When `AlertAction` contains an interactive element (e.g. a `Button`), that element follows normal tab order and standard button keyboard semantics."],"examples":[{"id":"alert-demo","title":"Default","source":"import Alert from \"@marko-ui/shadcn/ui/alert/alert.marko\";\nimport AlertTitle from \"@marko-ui/shadcn/ui/alert/title.marko\";\nimport AlertDescription from \"@marko-ui/shadcn/ui/alert/description.marko\";\n\n\n \n \n \n \n \n Heads up!\n You can add components to your app using the CLI.\n","description":"An alert with an icon, title, and description."},{"id":"alert-basic","title":"Basic","source":"import Alert from \"@marko-ui/shadcn/ui/alert/alert.marko\";\nimport AlertTitle from \"@marko-ui/shadcn/ui/alert/title.marko\";\nimport AlertDescription from \"@marko-ui/shadcn/ui/alert/description.marko\";\n\n\n \n \n \n \n Account updated successfully\n \n Your profile information has been saved. Changes will be reflected immediately.\n \n","description":"A basic alert with an icon, title, and description."},{"id":"alert-without-icon","title":"Without icon","source":"import Alert from \"@marko-ui/shadcn/ui/alert/alert.marko\";\nimport AlertTitle from \"@marko-ui/shadcn/ui/alert/title.marko\";\nimport AlertDescription from \"@marko-ui/shadcn/ui/alert/description.marko\";\n\n\n Deployment scheduled\n Your changes will go live in the next release window.\n","description":"The icon column collapses automatically when the alert has no icon."},{"id":"alert-destructive","title":"Destructive","source":"import Alert from \"@marko-ui/shadcn/ui/alert/alert.marko\";\nimport AlertTitle from \"@marko-ui/shadcn/ui/alert/title.marko\";\nimport AlertDescription from \"@marko-ui/shadcn/ui/alert/description.marko\";\n\n\n \n \n \n \n \n Unable to process your payment.\n \n

Please verify your billing information and try again.

\n

If the issue persists, please contact support.

\n \n","description":"Use `variant=\"destructive\"` for errors that need urgent attention."},{"id":"alert-action","title":"Action","source":"import Alert from \"@marko-ui/shadcn/ui/alert/alert.marko\";\nimport AlertAction from \"@marko-ui/shadcn/ui/alert/action.marko\";\nimport AlertTitle from \"@marko-ui/shadcn/ui/alert/title.marko\";\nimport AlertDescription from \"@marko-ui/shadcn/ui/alert/description.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n\n Dark mode is now available\n \n Enable it under your profile settings to get started.\n \n \n \n \n","description":"Use `AlertAction` to add a button or other action element to the alert."},{"id":"alert-colors","title":"Custom Colors","source":"import Alert from \"@marko-ui/shadcn/ui/alert/alert.marko\";\nimport AlertTitle from \"@marko-ui/shadcn/ui/alert/title.marko\";\nimport AlertDescription from \"@marko-ui/shadcn/ui/alert/description.marko\";\n\n\n \n \n \n \n \n Your subscription will expire in 3 days.\n \n Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.\n \n","description":"Customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component."},{"id":"alert-rtl","title":"RTL","source":"import Alert from \"@marko-ui/shadcn/ui/alert/alert.marko\";\nimport AlertTitle from \"@marko-ui/shadcn/ui/alert/title.marko\";\nimport AlertDescription from \"@marko-ui/shadcn/ui/alert/description.marko\";\n\n
\n \n \n \n \n \n تم الدفع بنجاح\n \n تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.\n \n \n \n \n \n \n \n \n ميزة جديدة متاحة\n \n لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.\n \n \n
","description":"Alert has no directional logic of its own — icon placement and text flow follow the ambient `dir` attribute."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","requires":["button","icon"],"nativeAttributes":"div","subcomponents":[{"name":"action","props":[],"nativeAttributes":"div"},{"name":"description","props":[],"nativeAttributes":"div"},{"name":"title","props":[],"nativeAttributes":"div"}],"composition":" lays out its content in a CSS grid: an optional leading icon\ncolumn (any element passed as a direct child that isn't `AlertTitle`/\n`AlertDescription`/`AlertAction` — typically an ``), title and\ndescription rows, and `AlertAction` positioned in the top-right corner.\nThe icon column collapses automatically when no icon is present (see the\n\"Without icon\" example below).\n\n```text\nAlert\n├── Icon\n├── AlertTitle\n├── AlertDescription\n└── AlertAction\n```"}