mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Danny WhiteandGildas Garcia
09fa2b8fc1
## What kind of change does this PR introduce? Docs update and design-system component taxonomy cleanup ## What is the current behavior? The design-system docs conflate low-level shadcn primitives with product-level alert patterns. Collapsible documentation previews the alert-specific wrapper, and the alert/collapsible relationship is unclear ## What is the new behavior? - Documents Alert and Collapsible as low-level atom components - Moves the alert-styled expandable wrapper into `ui-patterns/expandable-alert` as `ExpandableAlert` - Documents Expandable Alert as a Fragment Component next to Admonition - Updates the Session Timeout modal to import `ExpandableAlert` from `ui-patterns/expandable-alert` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * `CollapsibleAlert` component is now available for alert-styled expandable content. * **Documentation** * Updated component documentation to clarify when to use `Alert`, `Collapsible`, `Admonition`, and `CollapsibleAlert`. * Added comprehensive documentation for `CollapsibleAlert` with usage examples and variant options. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45863) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
41 lines
1.2 KiB
Plaintext
41 lines
1.2 KiB
Plaintext
---
|
|
title: Alert
|
|
description: Displays a low-level callout primitive for user attention.
|
|
component: true
|
|
source:
|
|
radix: true
|
|
shadcn: true
|
|
---
|
|
|
|
Alert is the low-level shadcn primitive that forms the foundation for [Admonition](../fragments/admonition). Use Admonition for product callouts unless you need custom composition that the Admonition API does not support.
|
|
|
|
Examples where Alert may be appropriate include bespoke icons, custom internal layouts, or wrapper components that need direct access to `alertVariants`.
|
|
|
|
Use [Collapsible Alert](../fragments/collapsible-alert) when a callout also needs expandable detail. Use [Collapsible](./collapsible) only for generic disclosure behaviour that is not itself an alert.
|
|
|
|
<ComponentPreview name="alert-demo" peekCode wide />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Alert, AlertDescription, AlertTitle } from 'ui/src/components/shadcn/ui/alert'
|
|
```
|
|
|
|
```tsx
|
|
<Alert>
|
|
<Terminal className="h-4 w-4" />
|
|
<AlertTitle>Heads up!</AlertTitle>
|
|
<AlertDescription>
|
|
You can add components and dependencies to your app using the cli.
|
|
</AlertDescription>
|
|
</Alert>
|
|
```
|
|
|
|
### Variants
|
|
|
|
Use `alertVariants` when building shared wrappers around the primitive.
|
|
|
|
```tsx
|
|
import { alertVariants } from 'ui/src/components/shadcn/ui/alert'
|
|
```
|