Surfaces

Form and detail surfaces can render as modal, drawer, page, or inline.

Form surfaces

form: {
  mode: "modal",
  width: "3xl"
}

Supported form.mode values:

• modal
• drawer
• page
• inline

Detail surfaces

detail: {
  enabled: true,
  mode: "drawer",
  title: "User Detail",
  width: "3xl"
}

Supported detail.mode values:

• modal
• drawer
• page
• inline

Modal

modal renders through FluiKitModal in a portal. It uses role="dialog" and aria-modal="true".

Drawer

drawer renders through FluiKitDrawer in a portal. The default drawer side is right.

Page

page renders an in-page panel. While active, dashboard and table are hidden.

Inline

inline renders below the table area and uses the configured width class.