Component Catalog — Layout Components

Part of: Component Catalog See also: Input Components | List Components

Layout components are located in src/components/layouts/.

TabLayout

Outermost wrapper for Settings tabs. Provides fixed bottom toolbar.

Import: import TabLayout from "src/components/layouts/TabLayout"

Props:

Prop	Type	Description
id	string	Layout identifier
toolbarItems	{ key: number; element: ReactNode }[]	Toolbar buttons

const toolbarFields = [
  { key: 0, element: <Button variant="secondary" onClick={onRefresh}>Refresh</Button> },
  { key: 1, element: <Button variant="secondary" isDisabled={!isModified} onClick={onRevert}>Revert</Button> },
  { key: 2, element: <Button variant="primary" isDisabled={!isModified} type="submit">Save</Button> },
  { key: 3, element: <KebabLayout direction="up" dropdownItems={kebabItems} /> },
];

<TabLayout id="settings-page" toolbarItems={toolbarFields}>
  {/* Content */}
</TabLayout>

SidebarLayout

Provides sidebar with jump links navigation for multi-section pages.

Import: import SidebarLayout from "src/components/layouts/SidebarLayout"

Props:

Prop	Type	Description
itemNames	string[]	Section names for jump links

const itemNames = ["General", "User", "Host", "Options"];

<SidebarLayout itemNames={itemNames}>
  <Flex>
    <TitleLayout headingLevel="h2" id="general" text="General" />
    {/* Section content */}
  </Flex>
  {/* More sections */}
</SidebarLayout>

TitleLayout

Section heading with consistent styling.

Import: import TitleLayout from "src/components/layouts/TitleLayout"

Props:

Prop	Type	Description
headingLevel	"h1" | "h2" | "h3" | ...	Heading level
id	string	Section ID (for jump links)
text	string	Section title

KebabLayout

Kebab menu (three dots) with dropdown actions.

Import: import KebabLayout from "src/components/layouts/KebabLayout"

Props:

Prop	Type	Description
direction	"up" | "down"	Dropdown direction
dropdownItems	ReactNode[]	Menu items

Important: Use direction="up" when kebab is in the bottom toolbar.

HelpTextWithIconLayout

Help button with question mark icon.

Import: import HelpTextWithIconLayout from "src/components/layouts/HelpTextWithIconLayout"

Props:

Prop	Type	Description
textContent	string	Button text
onClick	() => void	Click handler

SettingsTableLayout

Table layout for displaying key-value pairs in Settings.

Import: import SettingsTableLayout from "src/components/layouts/SettingsTableLayout"

---

Modal Components

ModalWithFormLayout

Base modal component for forms with field definitions.

Import: import ModalWithFormLayout, { Field } from "src/components/layouts/ModalWithFormLayout"

Props:

Prop	Type	Description
dataCy	string	Test identifier
variantType	"small" | "medium" | "large"	Modal size
modalPosition	"top" | "default"	Modal position
offPosition	string	Offset from top (e.g., "76px")
title	string	Modal title
formId	string	Form ID for submit button
fields	Field[]	Form field definitions
show	boolean	Controls visibility
onSubmit	() => void	Submit handler
onClose	() => void	Close handler
actions	JSX.Element[]	Action buttons

Field definition:

interface Field {
  id: string;
  name: string;
  pfComponent: ReactNode;
  fieldRequired?: boolean;
}

Example:

const fields: Field[] = [
  {
    id: "modal-form-name",
    name: "Name",
    pfComponent: <TextInput id="modal-form-name" value={name} onChange={setName} />,
    fieldRequired: true,
  },
];

<ModalWithFormLayout
  dataCy="add-entity-modal"
  variantType="small"
  modalPosition="top"
  offPosition="76px"
  title="Add entity"
  formId="add-modal-form"
  fields={fields}
  show={isOpen}
  onSubmit={onAdd}
  onClose={onClose}
  actions={modalActions}
/>

ModalWithTextAreaLayout

Modal with text area content.

Import: import ModalWithTextAreaLayout from "src/components/layouts/ModalWithTextAreaLayout"

---

Other Layout Components

Component	Import	Use Case
PopoverWithIconLayout	src/components/layouts/PopoverWithIconLayout	Info popover with icon
ExpandableCardLayout	src/components/layouts/ExpandableCardLayout	Expandable card (used in certificates)
DualListLayout	src/components/layouts/DualListLayout	Dual list selector
DataSpinner	src/components/layouts/DataSpinner	Loading spinner
SecondaryButton	src/components/layouts/SecondaryButton	Secondary action button
InputRequiredText	src/components/layouts/InputRequiredText	Text input with required indicator

---

Generic Section Components

For complex sections with the Category Toggle + Tables pattern:

CategoryToggleSection

Import: import CategoryToggleSection from "src/components/CategoryToggleSection/CategoryToggleSection"

See sub-pages/15-category-toggle-sections.md for detailed usage.