Fabrials UI

Loading state

Installation

Import the control from @fabrials/ui, after setting the app up.

TypeScript

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogActions, DialogClose } from "@fabrials/ui";

Or install it under shadcn's name, so code that imports @/components/ui/dialog gets this control. See shims.
```
npx shadcn@latest add @fabrials/dialog
```

API reference

Prop / export	Type	Description
`open`	`boolean`	Controlled open state.
`onOpenChange`	`(open) => void`	Fires on open and dismiss. Escape during an IME composition does not close the dialog.
`DialogContent size`	`default \| wide \| settings \| full-narrow`	default is 32rem, wide 46rem, settings 62 by 42rem (72 by 48 from 100rem). Wide, settings and full-narrow are the whole screen below 48rem.
`DialogContent close`	`corner \| footer`	corner is the X; footer draws no X and puts a Close button first in the DialogFooter (showCloseButton on DialogFooter is shadcn's name for it).
`DialogContent padding / keepMounted`	`none / boolean`	padding=none removes the padding; keepMounted keeps the dialog in the DOM, hidden, while it is closed.
`DialogContent closeVariant / DialogFooter closeVariant`	`Button variant`	The variant of the Close that close=footer puts in the footer: secondary by default, outline for a product whose secondary actions are outlines. Set once on DialogContent; a DialogFooter closeVariant wins.
`DialogContent container`	`element \| ref \| null`	Where the dialog is portalled; the body by default. Hold the element in state when the dialog can be open on the first render (a ref object is still empty then). null waits.
`DialogBody scroll / padding`	`boolean / none`	A DialogBody as a direct child of DialogContent gives a fixed header, a body that is the only scroller and a fixed footer. scroll=false lets the content scroll itself (a settings rail and panels). In a window under 30rem tall the dialog scrolls as a whole and only the footer sticks; the footer publishes its height and the dialog pads its scrolling with it, so a focused field is never under the footer.
`DialogActions`	`children`	Portals the actions into the footer from a stateful child (a form under the body), after Close. Nothing renders until the footer has mounted.

Focus moves into the dialog and returns to the trigger on Escape. The title names the task. Under 34rem the footer wraps: the secondary buttons share rows and the ink action, last as in the tab order, takes the full bottom row; every button is 44 px. Keep the header to the title and put the description first in the body: a phone in landscape or at a large text size then keeps room for the body. A body with no focusable content should be given tabIndex 0 and a name.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.

Installation

API reference

Behavior

Accessibility