and an
is a thematic break rather than an edge.", "props": { "Style": { "prop": "orientation", "values": { "Horizontal": "horizontal", "Vertical": "vertical" } } } }, "Breadcrumb": { "figmaComponent": "Breadcrumb", "figmaNodeId": "1359:252", "figmaPage": "Breadcrumb", "component": "Breadcrumb", "import": "import { Breadcrumb } from 'ionbase-ui';", "docs": "components/breadcrumb/index.html.md", "props": {} }, "Breadcrumb Item": { "figmaComponent": "Breadcrumb Item", "figmaNodeId": "1359:251", "figmaPage": "Breadcrumb", "component": "BreadcrumbItem", "import": "import { BreadcrumbItem } from 'ionbase-ui';", "docs": "components/breadcrumb-item/index.html.md", "props": { "Label#1359:0": { "prop": "children" }, "Show Separator#1359:4": { "ignore": "The separator is a CSS ::before in code and never markup, so it stays out of the accessibility tree — a \"/\" in the DOM is the usual build of this component and the usual defect. Figma has no generated content, so it is drawn as a real text layer and switched off on the first crumb. A drawing convenience with no prop behind it." }, "State": { "prop": "isCurrent", "when": { "Current": true }, "note": "Default is the resting link and Hover is CSS. Only Current is a prop, because the last crumb renders as text rather than a link." } } }, "Button": { "figmaComponent": "Button", "figmaNodeId": "21:461", "figmaPage": "Buttons", "component": "Button", "import": "import { Button } from 'ionbase-ui';", "docs": "components/button/index.html.md", "props": { "Type": { "prop": "variant", "values": { "Primary Brand": "primary-brand", "Primary Neutral": "primary-neutral", "Primary Soft": "primary-soft", "Secondary": "secondary", "Tertiary": "tertiary", "Destructive": "destructive", "Success": "success" } }, "Size": { "prop": "size", "values": { "Small": "sm", "Medium": "md", "Large": "lg", "XLarge": "xl" } }, "State": { "prop": "isDisabled", "when": { "Disabled": true }, "note": "Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one." }, "Label#21:375": { "prop": "children" }, "Leading Icon#21:378": { "prop": "startIcon", "note": "wrap in Icon; omit Icon's label, the button text names it" }, "Trailing Icon#21:379": { "prop": "endIcon", "note": "same" }, "Show Leading Icon#21:376": { "prop": "startIcon", "note": "an absent prop is the switch — React needs no Show boolean, so false means omit startIcon" }, "Show Trailing Icon#21:377": { "prop": "endIcon", "note": "same" } } }, "Button Group": { "figmaComponent": "Button Group", "figmaNodeId": "1564:513", "figmaPage": "Button Group", "component": "ButtonGroup", "import": "import { ButtonGroup } from 'ionbase-ui';", "docs": "components/button-group/index.html.md", "props": { "Align": { "prop": "align", "values": { "End": "end", "Start": "start", "Center": "center" } }, "Stack": { "prop": "stack", "when": { "True": true }, "note": "Stacked is what the group becomes below 32rem of viewport when `stack` is set; drawn at 343px. Align and Overflow do not apply to it, so it is drawn once." }, "Overflow": { "prop": "overflow", "values": { "Wrap": "wrap", "Menu": "menu" }, "note": "Menu shows the row once some Buttons have moved into More actions; in code the move is measured, not chosen — the design shows the result on a narrow row." }, "Show Start#1564:0": { "prop": "start", "note": "The `start` slot: Back in a wizard. False means `start` is omitted." } } }, "Card": { "figmaComponent": "Card", "figmaNodeId": "1441:294", "figmaPage": "Card", "component": "Card", "import": "import { Card } from 'ionbase-ui';", "docs": "components/card/index.html.md", "props": { "Intent": { "prop": "intent", "values": { "Default": "default", "Danger": "danger" } }, "Title#1441:0": { "prop": "title" }, "Show Header#1441:6": { "prop": "title", "note": "false hides the whole title row. In code, omit title: the card renders a
rather than a named , and description goes with it"
},
"Description#1441:3": {
"prop": "description"
},
"Show Description#1441:9": {
"prop": "description",
"note": "false means description is omitted"
},
"Action#1441:15": {
"prop": "action",
"note": "a standalone Link in the design; a small Button also fits. One control only"
},
"Show Action#1441:12": {
"prop": "action",
"note": "false means action is omitted"
},
"Show Body#1441:18": {
"prop": "children",
"note": "the body frame is a placeholder; in code the card’s children follow the title row"
}
}
},
"Chart Legend": {
"figmaComponent": "Chart Legend",
"figmaNodeId": "1432:369",
"figmaPage": "Chart",
"component": "ChartLegend",
"import": "import { ChartLegend } from 'ionbase-ui';",
"docs": "components/chart-legend/index.html.md",
"props": {
"Shape": {
"prop": "shape",
"values": {
"Square": "square",
"Line": "line"
}
},
"Show Item 3#1432:38": {
"prop": "items",
"note": "true draws a third entry in items; the entry count is the length of the array"
}
}
},
"Chart Tooltip": {
"figmaComponent": "Chart Tooltip",
"figmaNodeId": "1432:282",
"figmaPage": "Chart",
"component": "ChartTooltip",
"import": "import { ChartTooltip } from 'ionbase-ui';",
"docs": "components/chart-tooltip/index.html.md",
"props": {
"Title#1432:18": {
"prop": "title"
},
"Show Row 2#1432:19": {
"prop": "rows",
"note": "true draws a second entry in rows; the row count is the length of the array"
},
"Show Row 3#1432:20": {
"prop": "rows",
"note": "true draws a third entry in rows"
}
}
},
"Chat Message": {
"figmaComponent": "Chat Message",
"figmaNodeId": "1664:292",
"figmaPage": "Chat Message",
"component": "ChatMessage",
"import": "import { ChatMessage } from 'ionbase-ui';",
"docs": "components/chat-message/index.html.md",
"props": {
"From": {
"prop": "from",
"values": {
"Person": "person",
"Assistant": "assistant"
}
},
"Show Actions#1664:9": {
"prop": "actions",
"note": "Buttons after the message — Copy answer, Ask again. In code, pass them as `actions`; they follow the content in reading order."
},
"Show Avatar#1664:12": {
"prop": "avatar",
"note": "Avatar Gradient for a person, Logo mark for the assistant. Decoration: hidden from assistive tech, since the author's name says who."
}
}
},
"Checkbox": {
"figmaComponent": "Checkbox",
"figmaNodeId": "87:350",
"figmaPage": "Checkbox",
"component": "Checkbox",
"import": "import { Checkbox } from 'ionbase-ui';",
"docs": "components/checkbox/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Color": {
"prop": "intent",
"values": {
"Brand": "brand",
"Neutral": "neutral",
"Danger": "danger"
}
},
"State": {
"prop": "isIndeterminate",
"when": {
"Indeterminate": true,
"Indeterminate-disabled": true
},
"note": "Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping."
},
"Label#87:0": {
"prop": "children"
},
"Show Label#87:28": {
"prop": "children",
"note": "false means a bare box — and then aria-label becomes required"
},
"Focused#188:38": {
"ignore": "a drawn focus ring. In code it is :focus-visible, which the browser owns."
}
}
},
"Checkbox Group": {
"figmaComponent": "Checkbox Group",
"figmaNodeId": "1501:475",
"figmaPage": "Checkbox",
"component": "CheckboxGroup",
"import": "import { CheckboxGroup } from 'ionbase-ui';",
"docs": "components/checkbox-group/index.html.md",
"props": {
"Orientation": {
"prop": "orientation",
"values": {
"Vertical": "vertical",
"Horizontal": "horizontal"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Error": true
},
"note": "Error recolours the helper and shows errorMessage in its place; pass the error copy as errorMessage, not description. Disabled is isDisabled on the group, which cascades to every Checkbox."
},
"Label#1501:0": {
"prop": "label"
},
"Helper Text#1501:7": {
"prop": "description",
"note": "the help text; while State=Error the same slot holds errorMessage"
},
"Show Helper#1501:14": {
"prop": "description",
"note": "an absent prop is the switch, so false means omit description"
}
}
},
"Citation": {
"figmaComponent": "Citation",
"figmaNodeId": "1167:247",
"figmaPage": "Citation",
"component": "Citation",
"import": "import { Citation } from 'ionbase-ui';",
"docs": "components/citation/index.html.md",
"props": {
"State": {
"ignore": "Default/Hover is :hover in code"
},
"Index#1167:0": {
"prop": "index"
},
"Focused#1167:3": {
"ignore": "drawn focus ring; :focus-visible in code"
}
}
},
"Citation List": {
"figmaComponent": "Citation List",
"figmaNodeId": "1168:246",
"figmaPage": "Citation",
"component": "CitationList",
"import": "import { CitationList } from 'ionbase-ui';",
"docs": "components/citation-list/index.html.md",
"props": {
"Label#1168:4": {
"prop": "label"
}
}
},
"Citation List Item": {
"figmaComponent": "Citation List Item",
"figmaNodeId": "1168:241",
"figmaPage": "Citation",
"component": "CitationListItem",
"import": "import { CitationListItem } from 'ionbase-ui';",
"docs": "components/citation-list-item/index.html.md",
"props": {
"Index#1168:0": {
"prop": "index"
},
"Source#1168:1": {
"prop": "source"
},
"Passage#1168:2": {
"prop": "children"
},
"Show Passage#1168:3": {
"prop": "children",
"note": "false means no children passed"
}
}
},
"Code Snippet": {
"figmaComponent": "Code Snippet",
"figmaNodeId": "1585:273",
"figmaPage": "Code Snippet",
"component": "CodeSnippet",
"import": "import { CodeSnippet } from 'ionbase-ui';",
"docs": "components/code-snippet/index.html.md",
"note": "The code is the snippet's `children`, a string, shown and copied exactly as given. In Figma it is the Code text layer, edited directly.",
"props": {
"Type": {
"prop": "type",
"values": {
"Single": "single",
"Multi": "multi",
"Inline": "inline"
}
},
"Show More#1585:4": {
"ignore": "Not a prop: Show more appears by itself when a multi block has more lines than `maxLines` (12 by default), and reads Show less once pressed."
}
}
},
"Combobox": {
"figmaComponent": "Combobox",
"figmaNodeId": "1370:2359",
"figmaPage": "Combobox",
"component": "Combobox",
"import": "import { Combobox } from 'ionbase-ui';",
"docs": "components/combobox/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly. The same split Input records, because the field is Input’s box."
},
"Value#1370:0": {
"prop": "placeholder",
"note": "Figma’s text is whatever the field shows. In code that is `placeholder` until something is chosen; after that it is the selected option’s label, which comes from `options`."
}
}
},
"Command Palette": {
"figmaComponent": "Command Palette",
"figmaNodeId": "1458:368",
"figmaPage": "Command Palette",
"component": "CommandPalette",
"import": "import { CommandPalette } from 'ionbase-ui';",
"docs": "components/command-palette/index.html.md",
"example": " run(id)}\n/>",
"props": {
"Placeholder#1458:0": {
"prop": "placeholder"
},
"Show Footer#1458:3": {
"ignore": "the key hints are always rendered and hidden by CSS below 40rem, where there are no arrow keys to hint at — a viewport's answer, not a prop"
},
"State": {
"ignore": "Results and Empty are what the query produces against `commands`; the empty text is `emptyLabel`"
}
}
},
"Confidence Indicator": {
"figmaComponent": "Confidence Indicator",
"figmaNodeId": "1166:262",
"figmaPage": "Confidence Indicator",
"component": "ConfidenceIndicator",
"import": "import { ConfidenceIndicator } from 'ionbase-ui';",
"docs": "components/confidence-indicator/index.html.md",
"props": {
"Level": {
"prop": "level",
"values": {
"Low": "low",
"Medium": "medium",
"High": "high"
}
},
"Basis#1166:0": {
"prop": "basis"
}
}
},
"Copy Button": {
"figmaComponent": "Copy Button",
"figmaNodeId": "1578:563",
"figmaPage": "Copy Button",
"component": "CopyButton",
"import": "import { CopyButton } from 'ionbase-ui';",
"docs": "components/copy-button/index.html.md",
"props": {
"Type": {
"prop": "variant",
"values": {
"Tertiary": "tertiary",
"Secondary": "secondary"
}
},
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Icon Only": {
"prop": "isIconOnly",
"when": {
"True": true
},
"note": "`label` is then the name and the tooltip, and must say what is copied — \"Copy run ID\""
},
"State": {
"ignore": "Idle, Copied and Failed are what the button shows after a press, for `resetAfter` milliseconds — not props. Copied and Failed read `copiedLabel` and `failedLabel`."
}
}
},
"Date Picker": {
"figmaComponent": "Date Picker",
"figmaNodeId": "1394:536",
"figmaPage": "Date Picker",
"component": "DatePicker",
"import": "import { DatePicker } from 'ionbase-ui';",
"docs": "components/date-picker/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Input, whose box this is."
},
"Type": {
"ignore": "Single is DatePicker; Range is DateRangePicker, which takes the same size and state props. A Figma set maps to one code component, so the range picker is reached through this axis — see codeUnmapped.DateRangePicker."
}
}
},
"Coachmark": {
"figmaComponent": "Coachmark",
"figmaNodeId": "1706:718",
"figmaPage": "Coachmark",
"component": "Coachmark",
"import": "import { Coachmark } from 'ionbase-ui';",
"docs": "components/coachmark/index.html.md",
"props": {
"Placement": {
"prop": "placement",
"values": {
"Bottom": "bottom",
"Top": "top",
"Start": "start",
"End": "end"
},
"note": "logical: Start is drawn on the left, as a left-to-right page has it, and is the right in right to left. React Aria flips it when there is no room"
},
"Step": {
"ignore": "Tour's. Single is a Coachmark with no footer; First, Middle and Last are the footer a Tour builds for each step — its `progress` (\"2 of 4\") and Back, Next or Done. A lone Coachmark takes `progress` and `footer` itself; a sequence is Tour — see codeUnmapped.Tour"
},
"Title#1706:0": {
"prop": "title"
},
"Body#1706:17": {
"prop": "children"
},
"Show Close#1706:34": {
"prop": "onClose",
"note": "the close button shows when `onClose` is passed, and Escape closes it too; without one there is neither"
}
}
},
"App Switcher": {
"figmaComponent": "App Switcher",
"figmaNodeId": "1711:6649",
"figmaPage": "App Switcher",
"component": "AppSwitcher",
"import": "import { AppSwitcher } from 'ionbase-ui';",
"docs": "components/app-switcher/index.html.md",
"props": {
"Label#1711:20": {
"prop": "label",
"note": "names the nine-dot button, its tooltip and the panel; \"Apps\" by default"
},
"Show Footer#1711:21": {
"prop": "footer",
"note": "shown when `footer` is passed — a Link to every app, or to managing access"
}
}
},
"Color Picker": {
"figmaComponent": "Color Picker",
"figmaNodeId": "1696:834",
"figmaPage": "Color Picker",
"component": "ColorPicker",
"import": "import { ColorPicker } from 'ionbase-ui';",
"docs": "components/color-picker/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, whose box this is. Default, Hover and Focus are empty: a struck-through chip and no hex, value={null}. The chip's blue is the value, #0B5FFF, not a token. Open, the area, the hue strip and the presets — the page's \"Example — colour, open\" frame"
}
}
},
"Date Time Picker": {
"figmaComponent": "Date Time Picker",
"figmaNodeId": "1691:763",
"figmaPage": "Date Picker",
"component": "DateTimePicker",
"import": "import { DateTimePicker } from 'ionbase-ui';",
"docs": "components/date-time-picker/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Date Picker, whose box this is. The value text shows the reader's own format; the prop is YYYY-MM-DDTHH:MM, a wall-clock reading with no zone. Open, the calendar has a Time Field under it — the page's \"Example — date and time, open\" frame"
}
}
},
"Description List": {
"figmaComponent": "Description List",
"figmaNodeId": "1549:294",
"figmaPage": "Description List",
"component": "DescriptionList",
"import": "import { DescriptionList } from 'ionbase-ui';",
"docs": "components/description-list/index.html.md",
"props": {
"Layout": {
"prop": "layout",
"values": {
"Horizontal": "horizontal",
"Stacked": "stacked",
"Row": "row"
},
"note": "Horizontal stacks by itself when the list is narrower than 24rem — its own width, not the screen's — so a narrow frame needs no Stacked swap."
}
}
},
"Description List Item": {
"figmaComponent": "Description List Item",
"figmaNodeId": "1549:254",
"figmaPage": "Description List",
"component": "DescriptionListItem",
"import": "import { DescriptionListItem } from 'ionbase-ui';",
"docs": "components/description-list-item/index.html.md",
"props": {
"Term#1549:0": {
"prop": "term"
},
"Value#1549:5": {
"prop": "children"
},
"Empty": {
"ignore": "the drawn form of an empty value. In code pass null (not a typed dash): the item draws the \"—\" and reads the list's emptyText, \"Not set\""
},
"Layout": {
"ignore": "follows the DescriptionList's layout, not the item's: Horizontal items belong in a Horizontal list, Stacked items in a Stacked or Row one"
}
}
},
"Drawer": {
"figmaComponent": "Drawer",
"figmaNodeId": "1365:2404",
"figmaPage": "Drawer",
"component": "Drawer",
"import": "import { Drawer } from 'ionbase-ui';",
"docs": "components/drawer/index.html.md",
"props": {
"Placement": {
"prop": "placement",
"values": {
"Start": "start",
"End": "end",
"Top": "top",
"Bottom": "bottom"
}
},
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Title#1365:0": {
"prop": "title"
},
"Description#1365:13": {
"prop": "description"
},
"Show Description#1365:26": {
"prop": "description",
"note": "false means description is omitted"
},
"Show Close#1365:39": {
"prop": "showClose"
},
"Show Footer#1365:52": {
"prop": "footer",
"note": "false means footer is omitted"
}
}
},
"Empty State": {
"figmaComponent": "Empty State",
"figmaNodeId": "1334:2294",
"figmaPage": "Empty State",
"component": "EmptyState",
"import": "import { EmptyState } from 'ionbase-ui';",
"docs": "components/empty-state/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Inline": "inline",
"Panel": "panel",
"Page": "page"
}
},
"Reason": {
"prop": "reason",
"values": {
"No Results": "no-results",
"First Run": "first-run",
"No Access": "no-access",
"Error": "error"
}
},
"Title#1334:0": {
"prop": "title"
},
"Description#1334:13": {
"prop": "description"
},
"Show Description#1334:39": {
"prop": "description",
"note": "an absent prop is the switch"
},
"Show Icon#1334:26": {
"prop": "icon",
"note": "the mark renders when a node is passed; there is no boolean, and reason picks the tint rather than the glyph"
},
"Show Actions#1334:52": {
"prop": "action",
"note": "the row appears when action or secondaryAction is passed; there is no boolean"
}
}
},
"File Upload": {
"figmaComponent": "File Upload",
"figmaNodeId": "1367:2333",
"figmaPage": "File Upload",
"component": "FileUpload",
"import": "import { FileUpload } from 'ionbase-ui';",
"docs": "components/file-upload/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover and Dragging are CSS; Disabled is isDisabled. Dragging has no prop at all — it is a pointer state the browser owns."
},
"Prompt#1367:0": {
"prop": "prompt"
},
"Hint#1367:11": {
"prop": "hint"
},
"Show Hint#1367:22": {
"prop": "hint",
"note": "false means hint is omitted"
},
"Icon#1367:33": {
"ignore": "The upload glyph is inlined in the component, like Select’s chevron: it is part of the control rather than a slot a caller fills, so there is no prop to swap it. The INSTANCE_SWAP exists so a designer can substitute it in a mock without detaching."
}
}
},
"Full Card": {
"figmaComponent": "Full Card",
"figmaNodeId": "592:857",
"figmaPage": "Card",
"component": "FullCard",
"import": "import { FullCard } from 'ionbase-ui';",
"docs": "components/full-card/index.html.md",
"props": {
"Row Reverse": {
"prop": "alignment",
"values": {
"True": "left",
"False": "right"
},
"note": "Figma's boolean reverses the row; the code prop names which side the MEDIA sits on"
},
"Headline#592:0": {
"prop": "headline"
},
"Description#592:1": {
"prop": "description"
},
"Show Description#592:3": {
"prop": "description"
},
"Eyebrow#592:5": {
"prop": "eyebrow"
},
"Show Eyebrow#592:2": {
"prop": "eyebrow"
},
"Actions#592:6": {
"prop": "actions"
},
"Show Actions#592:4": {
"prop": "actions"
},
"Media#592:7": {
"prop": "media",
"note": "pass the screenshot itself — the component draws the frame"
}
}
},
"Header": {
"figmaComponent": "Header",
"figmaNodeId": "69:335",
"figmaPage": "Header",
"component": "Header",
"import": "import { Header } from 'ionbase-ui';",
"docs": "components/header/index.html.md",
"props": {
"Device": {
"prop": "open",
"when": {
"Mobile-Open": true,
"Mobile-Closed": false
},
"note": "Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop."
},
"Center Slot#68:12": {
"prop": "center"
},
"End Slot#68:16": {
"prop": "end"
},
"End Slot#667:37": {
"prop": "end",
"note": "a duplicate slot in the Figma component"
},
"Show Center Slot#69:0": {
"prop": "center"
},
"Show End Slot#69:4": {
"prop": "end"
}
}
},
"Icon Button": {
"figmaComponent": "Icon Button",
"figmaNodeId": "623:151",
"figmaPage": "Buttons",
"component": "Button",
"import": "import { Button } from 'ionbase-ui';",
"docs": "components/button/index.html.md",
"note": "Not a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.",
"props": {
"Type": {
"prop": "variant",
"values": {
"Primary Brand": "primary-brand",
"Primary Neutral": "primary-neutral",
"Primary Soft": "primary-soft",
"Secondary": "secondary",
"Tertiary": "tertiary",
"Destructive": "destructive",
"Success": "success"
}
},
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg",
"XLarge": "xl"
}
},
"State": {
"prop": "isDisabled",
"when": {
"Disabled": true
},
"note": "as Button"
},
"Icon#623:0": {
"prop": "startIcon",
"note": "with Icon's own label omitted — the Button's aria-label carries the name"
},
"Shape": {
"ignore": "Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API."
}
}
},
"Inline Edit": {
"figmaComponent": "Inline Edit",
"figmaNodeId": "1623:368",
"figmaPage": "Inline Edit",
"component": "InlineEdit",
"import": "import { InlineEdit } from 'ionbase-ui';",
"docs": "components/inline-edit/index.html.md",
"note": "The value, and the Value text layer here, is `value` (or `defaultValue`); edit it directly. The label is not drawn — `label` names the field and the Edit button in code — and neither is the status that announces a save. In code the value inherits the text around it — a page description, a table cell — so the type drawn here is a sample; Size is the field's.",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md"
}
},
"State": {
"ignore": "Runtime, not props. View is the value with its Edit button; Empty is no value, showing `placeholder`; Editing is after Edit is pressed — the field focused with its text selected, Save and Cancel below; Invalid is `validate` returning a message, or `onSave` rejecting, shown as the field's error with what was typed kept. Enter saves and Escape cancels."
}
}
},
"Input": {
"figmaComponent": "Input",
"figmaNodeId": "80:275",
"figmaPage": "Input",
"component": "Input",
"import": "import { Input } from 'ionbase-ui';",
"docs": "components/input/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis."
},
"Value#80:0": {
"prop": "value",
"note": "or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value"
},
"Leading Icon#80:66": {
"prop": "leadingIcon"
},
"Trailing Icon#80:88": {
"prop": "trailingIcon"
},
"Show Leading Icon#80:22": {
"prop": "leadingIcon",
"note": "false means omit the prop"
},
"Show Trailing Icon#80:44": {
"prop": "trailingIcon",
"note": "false means omit the prop"
}
}
},
"Input/Phone": {
"figmaComponent": "Input/Phone",
"figmaNodeId": "80:372",
"figmaPage": "Input",
"component": "PhoneInput",
"import": "import { PhoneInput } from 'ionbase-ui';",
"docs": "components/phone-input/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Dial Code#80:126": {
"prop": "dialCode"
}
}
},
"Kbd": {
"figmaComponent": "Kbd",
"figmaNodeId": "1457:242",
"figmaPage": "Command Palette",
"component": "Kbd",
"import": "import { Kbd } from 'ionbase-ui';",
"docs": "components/kbd/index.html.md",
"example": "",
"props": {
"Key#1457:0": {
"prop": "children",
"note": "one Figma Kbd is one key. For a shortcut, use `shortcut=\"mod+k\"` on a single Kbd rather than several: it draws each platform's own keys and names them for a screen reader"
}
}
},
"Link": {
"figmaComponent": "Link",
"figmaNodeId": "774:1516",
"figmaPage": "Link",
"component": "Link",
"import": "import { Link } from 'ionbase-ui';",
"docs": "components/link/index.html.md",
"props": {
"Type": {
"prop": "variant",
"values": {
"Inline": "inline",
"Standalone": "standalone"
}
},
"State": {
"prop": "isDisabled",
"when": {
"Disabled": true
},
"note": "Hover and Focus are CSS; Visited is :visited, which no prop can set"
},
"Label#774:0": {
"prop": "children"
},
"Leading Icon#774:33": {
"prop": "startIcon"
},
"Trailing Icon#774:44": {
"prop": "endIcon"
},
"Show Leading Icon#774:11": {
"prop": "startIcon"
},
"Show Trailing Icon#774:22": {
"prop": "endIcon"
}
}
},
"List": {
"figmaComponent": "List",
"figmaNodeId": "1557:794",
"figmaPage": "List",
"component": "List",
"import": "import { List } from 'ionbase-ui';",
"docs": "components/list/index.html.md",
"props": {
"Selection": {
"prop": "selectionMode",
"values": {
"None": "none",
"Single": "single",
"Multiple": "multiple"
},
"note": "Multiple is where each row carries its Checkbox; the Figma rows show it with Selection=Multiple on List Item. The rows themselves are `items` — see List Item."
},
"Density": {
"prop": "density",
"values": {
"Default": "default",
"Compact": "compact"
}
}
}
},
"Logo-Ionbase": {
"figmaComponent": "Logo-Ionbase",
"figmaNodeId": "52:21369",
"figmaPage": "Logo",
"component": "Logo",
"import": "import { Logo } from 'ionbase-ui';",
"docs": "components/logo/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Large": "lg"
}
},
"Type": {
"prop": "wordmark",
"values": {
"Logo": "vector",
"Icon": "text"
},
"note": "the names invert: Figma's Logo is the serif vector wordmark, Figma's Icon is live Host Grotesk text"
},
"Property": {
"ignore": "the Name axis renders placeholder text in an unbound colour — leftover debug content, not a real asset. LogoMark covers the no-wordmark case."
}
}
},
"Menu": {
"figmaComponent": "Menu",
"figmaNodeId": "82:306",
"figmaPage": "Menu",
"component": "Menu",
"import": "import { Menu } from 'ionbase-ui';",
"docs": "components/menu/index.html.md",
"props": {
"Type": {
"prop": "selectionMode",
"values": {
"Single": "single",
"Multi": "multiple"
},
"note": "selectionMode none — an action menu with no check slot — is not drawn; every Figma menu shows a selection."
}
}
},
"Menu Item": {
"figmaComponent": "Menu Item",
"figmaNodeId": "82:217",
"figmaPage": "Menu",
"component": "MenuItem",
"import": "import { MenuItem } from 'ionbase-ui';",
"docs": "components/menu-item/index.html.md",
"props": {
"Label#82:0": {
"prop": "children"
},
"Leading Icon#82:12": {
"prop": "icon",
"note": "wrap in Icon; omit Icon's label, the row text names it"
},
"Show Leading Icon#82:6": {
"prop": "icon",
"note": "an absent prop is the switch, so false means omit icon"
},
"State": {
"prop": "isDisabled",
"when": {
"Disabled": true
},
"note": "Hover is the highlighted row, which the keyboard and the pointer share. Selected and Selected-hover are the row's key in Menu's selectedKeys, not an item prop. A row that opens a submenu is not drawn: code puts a chevron where the check sits."
}
}
},
"Menu Section Title": {
"figmaComponent": "Menu Section Title",
"figmaNodeId": "1468:271",
"figmaPage": "Menu",
"component": "MenuSection",
"import": "import { MenuSection } from 'ionbase-ui';",
"docs": "components/menu-section/index.html.md",
"props": {}
},
"Modal": {
"figmaComponent": "Modal",
"figmaNodeId": "792:1537",
"figmaPage": "Modal",
"component": "Modal",
"import": "import { Modal } from 'ionbase-ui';",
"docs": "components/modal/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg",
"Fullscreen": "fullscreen"
}
},
"Align": {
"prop": "align",
"values": {
"Left": "left",
"Center": "center"
}
},
"Title#792:0": {
"prop": "title"
},
"Description#792:5": {
"prop": "description"
},
"Show Description#792:10": {
"prop": "description"
},
"Show Close#792:15": {
"prop": "showClose"
},
"Show Body#792:20": {
"prop": "children"
},
"Show Footer#792:25": {
"prop": "footer"
},
"Show Media#794:24": {
"prop": "media"
},
"Media#794:33": {
"prop": "media"
}
}
},
"Multi Select": {
"figmaComponent": "Multi Select",
"figmaNodeId": "1510:666",
"figmaPage": "Multi Select",
"component": "MultiSelect",
"import": "import { MultiSelect } from 'ionbase-ui';",
"docs": "components/multi-select/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly, and both hide the tags’ × buttons. The field is Combobox’s, which is Input’s box — the same split both record."
},
"Show Tags#1510:0": {
"prop": "hideTags",
"note": "Inverted: Show Tags off is `hideTags`, for a filter bar whose active-filters row already shows the values. With tags shown, they are the chosen `value`, labelled from `options`, and appear whenever something is chosen."
}
}
},
"Nav Item": {
"figmaComponent": "Nav Item",
"figmaNodeId": "53:13",
"figmaPage": "Nav Item",
"component": "NavItem",
"import": "import { NavItem } from 'ionbase-ui';",
"docs": "components/nav-item/index.html.md",
"props": {
"State": {
"prop": "isCurrent",
"when": {
"Current": true
},
"note": "Default and Hover are CSS and React Aria useHover, not props."
},
"Label#53:0": {
"prop": "children"
},
"Icon#61:0": {
"prop": "icon"
},
"Show Chevron#53:3": {
"prop": "showChevron"
}
}
},
"Notifications Panel": {
"figmaComponent": "Notifications Panel",
"figmaNodeId": "1611:4730",
"figmaPage": "Notifications Panel",
"component": "NotificationsPanel",
"import": "import { NotificationsPanel } from 'ionbase-ui';",
"docs": "components/notifications-panel/index.html.md",
"note": "The panel's contents, drawn at the width of Popover Size=Large's body (368). Place it in the Popover's Body with the Title Notifications, or in a Drawer on a phone. Its rows are .Notification instances built from `notifications`; their text layers are edited directly.",
"props": {
"State": {
"prop": "isLoading",
"when": {
"Loading": true
},
"note": "List is the default. Empty is `notifications` = [], which renders Empty State Size=Inline, Reason=First Run, \"You’re all caught up\"."
}
}
},
"Number Input": {
"figmaComponent": "Number Input",
"figmaNodeId": "1389:473",
"figmaPage": "Number Input",
"component": "NumberInput",
"import": "import { NumberInput } from 'ionbase-ui';",
"docs": "components/number-input/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly. The same split Input records, because the box is Input’s."
},
"Stepper#1389:0": {
"prop": "showStepper"
},
"Value#1389:22": {
"prop": "value",
"note": "A number in code; Figma’s text is its formatted display, and the placeholder until one is entered."
}
}
},
"Page Header": {
"figmaComponent": "Page Header",
"figmaNodeId": "1473:242",
"figmaPage": "Page Header",
"component": "PageHeader",
"import": "import { PageHeader } from 'ionbase-ui';",
"docs": "components/page-header/index.html.md",
"props": {
"Title#1473:0": {
"prop": "title"
},
"Description#1473:1": {
"prop": "description"
},
"Show Description#1473:4": {
"prop": "description",
"note": "an absent prop is the switch, so false means omit description"
},
"Show Breadcrumb#1473:2": {
"prop": "breadcrumb",
"note": "pass a Breadcrumb; false means omit breadcrumb"
},
"Show Status#1473:3": {
"prop": "status",
"note": "a Badge for the record's state; false means omit status"
},
"Show Actions#1473:5": {
"prop": "actions",
"note": "Buttons, most important last, and a MenuTrigger with an icon-only Button for the rest; false means omit actions"
},
"Show Below#1473:6": {
"prop": "children",
"note": "the row beneath — the page's Tabs or its filters; false means no children"
}
}
},
"Pagination": {
"figmaComponent": "Pagination",
"figmaNodeId": "1291:503",
"figmaPage": "Pagination",
"component": "Pagination",
"import": "import { Pagination } from 'ionbase-ui';",
"docs": "components/pagination/index.html.md",
"props": {
"Type": {
"prop": "type",
"values": {
"Numbered": "numbered",
"Simple": "simple"
}
},
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Show Page Size#1291:0": {
"prop": "showPageSize"
}
}
},
"Password Input": {
"figmaComponent": "Password Input",
"figmaNodeId": "1590:386",
"figmaPage": "Password Input",
"component": "PasswordInput",
"import": "import { PasswordInput } from 'ionbase-ui';",
"docs": "components/password-input/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, because the box is Input's. The eye is the Show password toggle, a tab stop, in every state."
},
"Revealed": {
"prop": "isRevealed",
"when": {
"True": true
},
"note": "Usually left to the user: the toggle sets it. Pass isRevealed with onRevealedChange only to control it, or defaultRevealed to start shown. The name stays \"Show password\" either way; aria-pressed says which."
}
}
},
"Popover": {
"figmaComponent": "Popover",
"figmaNodeId": "825:1853",
"figmaPage": "Popover",
"component": "Popover",
"import": "import { Popover } from 'ionbase-ui';",
"docs": "components/popover/index.html.md",
"props": {
"Placement": {
"prop": "placement",
"values": {
"Top": "top",
"Bottom": "bottom",
"Left": "left",
"Right": "right"
}
},
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Title#825:0": {
"prop": "title"
},
"Show Header#825:26": {
"prop": "title"
},
"Body#825:13": {
"prop": "content"
},
"Show Body#825:52": {
"prop": "content"
},
"Show Close#825:39": {
"prop": "showClose"
},
"Show Footer#825:65": {
"prop": "footer"
},
"Show Arrow#825:78": {
"prop": "hideArrow",
"note": "inverted — Show Arrow false is hideArrow true"
}
}
},
"Progress Bar": {
"figmaComponent": "Progress Bar",
"figmaNodeId": "1344:331",
"figmaPage": "Progress Bar",
"component": "ProgressBar",
"import": "import { ProgressBar } from 'ionbase-ui';",
"docs": "components/progress-bar/index.html.md",
"props": {
"Intent": {
"prop": "intent",
"values": {
"Primary": "primary",
"Success": "success",
"Warning": "warning",
"Error": "error"
}
},
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md"
}
},
"Type": {
"prop": "value",
"note": "not a prop value. Determinate means `value` was passed; Indeterminate means it was omitted, which is also what drops aria-valuenow. There is no `type` prop in code, and adding one would make the state settable independently of the number it describes"
},
"Label#1344:0": {
"prop": "label"
},
"Value#1344:17": {
"prop": "valueText",
"note": "the Figma text is a sample percentage; in code `valueText` REPLACES the computed percentage and is what a screen reader speaks"
},
"Show Label#1344:34": {
"prop": "isLabelVisible"
},
"Show Value#1344:51": {
"prop": "isValueVisible",
"note": "bound only on the Determinate variants — an indeterminate bar has no percentage to reveal"
}
}
},
"Progress Ring": {
"figmaComponent": "Progress Ring",
"figmaNodeId": "1703:333",
"figmaPage": "Progress Bar",
"component": "ProgressRing",
"import": "import { ProgressRing } from 'ionbase-ui';",
"docs": "components/progress-ring/index.html.md",
"props": {
"Intent": {
"prop": "intent",
"values": {
"Primary": "primary",
"Success": "success",
"Warning": "warning",
"Error": "error"
}
},
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Label#1703:0": {
"prop": "label"
},
"Value#1703:13": {
"prop": "valueText",
"note": "the text beside the ring. On Small it is the value, the percentage when no valueText is passed; on Medium and Large it shows only with a valueText, since the centre already has the percentage"
},
"Percent#1703:26": {
"ignore": "computed from value and max — there is no prop. The drawn arc is a sample 60%; in code the fill is dashed to the value. Medium and Large only: Small has no room inside"
},
"Show Label#1703:39": {
"prop": "isLabelVisible"
},
"Show Value#1703:52": {
"prop": "isValueVisible",
"note": "one switch for the percentage inside and the value beside, as in code"
}
}
},
"Prompt Input": {
"figmaComponent": "Prompt Input",
"figmaNodeId": "1393:387",
"figmaPage": "Prompt Input",
"component": "PromptInput",
"import": "import { PromptInput } from 'ionbase-ui';",
"docs": "components/prompt-input/index.html.md",
"props": {
"State": {
"prop": "isDisabled",
"when": {
"Disabled": true
},
"note": "Hover and Focus are CSS. Filled is content — a non-empty value — and is the only state in which send is live."
},
"Running": {
"prop": "isRunning",
"values": {
"True": true,
"False": false
},
"note": "with onStop, which is what swaps send for AgentStop"
},
"Value#1393:0": {
"prop": "value",
"note": "Figma’s text is whatever the field shows: the placeholder until something is typed, then the value."
},
"Show Actions#1393:11": {
"prop": "actions",
"note": "false means actions is omitted; the attach button drawn there is an example, not part of the component"
}
}
},
"Radio": {
"figmaComponent": "Radio",
"figmaNodeId": "89:314",
"figmaPage": "Radio",
"component": "Radio",
"import": "import { Radio } from 'ionbase-ui';",
"docs": "components/radio/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Color": {
"prop": "intent",
"values": {
"Brand": "brand",
"Neutral": "neutral",
"Danger": "danger"
}
},
"State": {
"ignore": "Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection"
},
"Label#89:0": {
"prop": "children"
},
"Show Label#89:19": {
"prop": "children",
"note": "false means aria-label is required"
},
"Focused#188:0": {
"ignore": "drawn focus ring; :focus-visible in code"
}
}
},
"Search Field": {
"figmaComponent": "Search Field",
"figmaNodeId": "1498:242",
"figmaPage": "Search Field",
"component": "SearchField",
"import": "import { SearchField } from 'ionbase-ui';",
"docs": "components/search-field/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, because the box is Input's. The clear button Filled shows is not a prop: it appears whenever there is a query."
},
"Value#80:0": {
"prop": "value",
"note": "The query. Figma's text is also the placeholder until one is typed — pass that as placeholder, and name the field with aria-label, not the placeholder."
}
}
},
"Segmented Control": {
"figmaComponent": "Segmented Control",
"figmaNodeId": "1390:435",
"figmaPage": "Segmented Control",
"component": "SegmentedControl",
"import": "import { SegmentedControl } from 'ionbase-ui';",
"docs": "components/segmented-control/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Full Width": {
"prop": "isFullWidth",
"values": {
"True": true,
"False": false
}
}
}
},
"Segmented Control Item": {
"figmaComponent": "Segmented Control Item",
"figmaNodeId": "1390:332",
"figmaPage": "Segmented Control",
"component": "SegmentedControlItem",
"import": "import { SegmentedControlItem } from 'ionbase-ui';",
"docs": "components/segmented-control-item/index.html.md",
"props": {
"Label#1390:0": {
"prop": "children"
},
"Show Icon#1390:19": {
"prop": "icon",
"note": "false means icon is omitted"
},
"Icon#1390:38": {
"prop": "icon"
},
"Size": {
"ignore": "set on the parent SegmentedControl, not per item"
},
"State": {
"prop": "isDisabled",
"when": {
"Disabled": true,
"Selected-Disabled": true
},
"note": "Default and Hover are CSS. Selected is the parent SegmentedControl’s value — the item never owns selection, the same split Tabs Item records."
},
"Focused#1390:57": {
"ignore": "drawn focus ring; :focus-visible in code"
}
}
},
"Select": {
"figmaComponent": "Select",
"figmaNodeId": "82:379",
"figmaPage": "Select",
"component": "Select",
"import": "import { Select } from 'ionbase-ui';",
"docs": "components/select/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled"
},
"Value#82:18": {
"prop": "placeholder",
"note": "Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array."
}
}
},
"Selectable Tile": {
"figmaComponent": "Selectable Tile",
"figmaNodeId": "1628:294",
"figmaPage": "Selectable Tile",
"component": "SelectableTile",
"import": "import { SelectableTile } from 'ionbase-ui';",
"docs": "components/selectable-tile/index.html.md",
"note": "Title is `title` — the Control's Label, the input's name; Description is `description` and Extra is `children`, both read after the name. The text layers are edited directly. The whole tile is the target in code; nothing inside it may be interactive.",
"props": {
"Kind": {
"ignore": "Not a prop: the group decides. Radio is a tile inside a RadioGroup — one choice, arrow keys between them; Checkbox is a tile inside a CheckboxGroup, or alone."
},
"State": {
"prop": "isDisabled",
"when": {
"Disabled": true
},
"note": "Selected is the group's value (or `isSelected` alone), not a tile prop; Default is neither. Selected draws the 2px border/primary-strong and the filled indicator."
}
}
},
"Setting Row": {
"figmaComponent": "Setting Row",
"figmaNodeId": "1418:260",
"figmaPage": "Setting Row",
"component": "SettingRow",
"import": "import { SettingRow } from 'ionbase-ui';",
"docs": "components/setting-row/index.html.md",
"props": {
"Label#1418:0": {
"prop": "label"
},
"Description#1418:3": {
"prop": "description"
},
"Show Description#1418:6": {
"prop": "description",
"note": "false means description is omitted"
},
"Control#1418:9": {
"prop": "children",
"note": "the control is the row’s child; in code it is named and described by the row automatically, so turn its own label off in Figma too"
},
"Layout": {
"ignore": "not a prop: the row stacks below 30rem of its own width through a container query, the same call Header makes for its Device axis"
}
}
},
"Side Panel": {
"figmaComponent": "Side Panel",
"figmaNodeId": "1547:441",
"figmaPage": "Side Panel",
"component": "SidePanel",
"import": "import { SidePanel } from 'ionbase-ui';",
"docs": "components/side-panel/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Title#1547:0": {
"prop": "title"
},
"Description#1547:4": {
"prop": "description"
},
"Show Description#1547:8": {
"prop": "description",
"note": "false means description is omitted"
},
"Show Close#1547:12": {
"prop": "showClose"
},
"Show Footer#1547:16": {
"prop": "footer",
"note": "false means footer is omitted. The footer holds Buttons; Figma's single action is one of them"
}
}
},
"Sidebar": {
"figmaComponent": "Sidebar",
"figmaNodeId": "1396:502",
"figmaPage": "Sidebar",
"component": "Sidebar",
"import": "import { Sidebar } from 'ionbase-ui';",
"docs": "components/sidebar/index.html.md",
"props": {
"Show Header#1396:105": {
"prop": "header",
"note": "false means header is omitted; the logo drawn there is an example"
},
"Show Footer#1396:106": {
"prop": "footer",
"note": "false means footer is omitted; the Settings row drawn there is an example"
}
}
},
"Sidebar Item": {
"figmaComponent": "Sidebar Item",
"figmaNodeId": "1396:412",
"figmaPage": "Sidebar",
"component": "SidebarItem",
"import": "import { SidebarItem } from 'ionbase-ui';",
"docs": "components/sidebar-item/index.html.md",
"props": {
"State": {
"prop": "isCurrent",
"when": {
"Current": true,
"Current-Hover": true
},
"note": "Default and Hover are CSS; Disabled is isDisabled."
},
"Has Children": {
"prop": "children",
"when": {
"True": true
},
"note": "True means nested SidebarItems are passed as children; Figma draws them as sibling instances indented 16px."
},
"Expanded": {
"prop": "isExpanded",
"values": {
"True": true,
"False": false
},
"note": "or defaultExpanded; only meaningful with children"
},
"Label#1396:0": {
"prop": "label"
},
"Show Icon#1396:16": {
"prop": "icon",
"note": "false means icon is omitted"
},
"Icon#1396:32": {
"prop": "icon"
},
"Show Badge#1396:48": {
"prop": "badge",
"note": "false means badge is omitted"
},
"Badge#1396:64": {
"prop": "badge"
},
"Actions Visible#1396:80": {
"prop": "actions",
"note": "code renders them always but reveals them on hover and focus (always on touch); Figma shows or hides them"
}
}
},
"Sidebar Section": {
"figmaComponent": "Sidebar Section",
"figmaNodeId": "1396:501",
"figmaPage": "Sidebar",
"component": "SidebarSection",
"import": "import { SidebarSection } from 'ionbase-ui';",
"docs": "components/sidebar-section/index.html.md",
"props": {
"Title#1396:96": {
"prop": "title"
},
"Collapsible#1396:99": {
"prop": "isCollapsible"
},
"Collapsed": {
"prop": "isExpanded",
"values": {
"False": true,
"True": false
},
"note": "the names invert: Figma says Collapsed, code says isExpanded (or defaultExpanded)"
},
"Show Actions#1396:102": {
"prop": "actions",
"note": "false means actions is omitted"
}
}
},
"Skeleton": {
"figmaComponent": "Skeleton",
"figmaNodeId": "1345:248",
"figmaPage": "Skeleton",
"component": "Skeleton",
"import": "import { Skeleton } from 'ionbase-ui';",
"docs": "components/skeleton/index.html.md",
"props": {
"Variant": {
"prop": "variant",
"values": {
"Text": "text",
"Circle": "circle",
"Rect": "rect"
}
}
}
},
"Skip Link": {
"figmaComponent": "Skip Link",
"figmaNodeId": "1668:241",
"figmaPage": "Link",
"component": "SkipLink",
"import": "import { SkipLink } from 'ionbase-ui';",
"docs": "components/skip-link/index.html.md",
"props": {
"Label#1668:0": {
"prop": "children",
"note": "Defaults to \"Skip to main content\"; set it only to translate it. Drawn in its one visible state, focused: in code it is clipped to nothing until it has keyboard focus. `target` has no Figma counterpart — the id of the page's ."
}
}
},
"Slider": {
"figmaComponent": "Slider",
"figmaNodeId": "1533:308",
"figmaPage": "Slider",
"component": "Slider",
"import": "import { Slider } from 'ionbase-ui';",
"docs": "components/slider/index.html.md",
"props": {
"Type": {
"prop": "value",
"note": "Not a prop of its own: the shape of value or defaultValue decides it. Single is a number, defaultValue={120}; Range is a pair, defaultValue={[30, 120]}, with thumbLabels naming the two thumbs."
},
"State": {
"prop": "isDisabled",
"when": {
"Disabled": true
},
"note": "Focus is runtime: the ring goes round the focused thumb's 24px target when it has keyboard focus."
},
"Label#1533:0": {
"prop": "label"
},
"Description#1533:14": {
"prop": "description"
},
"Show Description#1533:28": {
"prop": "description",
"note": "false means description is omitted"
},
"Show Value#1533:21": {
"prop": "showValue",
"note": "The value text is formatted in code from formatOptions — { style: 'unit', unit: 'second', unitDisplay: 'short' } gives \"120 sec\". Do not type it."
}
}
},
"Spinner": {
"figmaComponent": "Spinner",
"figmaNodeId": "1341:258",
"figmaPage": "Spinner",
"component": "Spinner",
"import": "import { Spinner } from 'ionbase-ui';",
"docs": "components/spinner/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Label#1341:0": {
"prop": "label"
},
"Show Label#1341:4": {
"prop": "isLabelVisible",
"note": "controls only whether the label is VISIBLE. The label is announced either way — turning this off in Figma does not remove it from the accessibility tree, and `isDecorative` is the prop that silences the component"
}
}
},
"Split Button": {
"figmaComponent": "Split Button",
"figmaNodeId": "1569:410",
"figmaPage": "Split Button",
"component": "SplitButton",
"import": "import { SplitButton } from 'ionbase-ui';",
"docs": "components/split-button/index.html.md",
"props": {
"Type": {
"prop": "variant",
"values": {
"Primary Brand": "primary-brand",
"Primary Neutral": "primary-neutral",
"Secondary": "secondary"
},
"note": "Both halves take the type. Tertiary and destructive are not offered: a quiet split button reads as two loose buttons, and a destructive one hides dangerous variations behind a menu."
},
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg",
"XLarge": "xl"
}
}
}
},
"Stat Group": {
"figmaComponent": "Stat Group",
"figmaNodeId": "1412:344",
"figmaPage": "Stat Tile",
"component": "StatGroup",
"import": "import { StatGroup } from 'ionbase-ui';",
"docs": "components/stat-group/index.html.md",
"props": {}
},
"Stat Tile": {
"figmaComponent": "Stat Tile",
"figmaNodeId": "1412:343",
"figmaPage": "Stat Tile",
"component": "StatTile",
"import": "import { StatTile } from 'ionbase-ui';",
"docs": "components/stat-tile/index.html.md",
"props": {
"Label#1412:0": {
"prop": "label"
},
"Value#1412:10": {
"prop": "value"
},
"Comparison#1412:20": {
"prop": "comparison"
},
"State": {
"prop": "isLoading",
"values": {
"Default": false,
"Loading": true
}
},
"Change": {
"prop": "goodWhen",
"when": {
"Better Up": "up",
"Better Down": "down",
"Worse Up": "down",
"Worse Down": "up",
"Neutral Up": "neutral",
"Neutral Down": "neutral"
},
"note": "Figma draws what the badge SAYS; code derives it from two props. The direction is the sign of `change` (Up is positive), and Better or Worse follows from that and goodWhen — so Worse Up is a rise where down was good. No Change is a `change` that rounds to zero; None is `change` omitted. The badge text itself is computed from `change` and `changeUnit`."
}
}
},
"Status Indicator": {
"figmaComponent": "Status Indicator",
"figmaNodeId": "1593:290",
"figmaPage": "Status Indicator",
"component": "StatusIndicator",
"import": "import { StatusIndicator } from 'ionbase-ui';",
"docs": "components/status-indicator/index.html.md",
"note": "The word is the component's children — the status in words, required — and the Label text layer here, edited directly. Beside a control, saying how its save went — Saving…, Saved, Not saved — it is InlineLoading in code; see codeUnmapped.InlineLoading.",
"props": {
"Intent": {
"prop": "intent",
"values": {
"Neutral": "neutral",
"Success": "success",
"Warning": "warning",
"Error": "error",
"Information": "information",
"Progress": "progress"
},
"note": "Each intent is its own shape, so the status is not carried by colour alone. Progress spins in code, and stands still under reduced motion."
},
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md"
}
}
}
},
"Stepper": {
"figmaComponent": "Stepper",
"figmaNodeId": "1391:431",
"figmaPage": "Stepper",
"component": "Stepper",
"import": "import { Stepper } from 'ionbase-ui';",
"docs": "components/stepper/index.html.md",
"props": {
"Orientation": {
"prop": "orientation",
"values": {
"Horizontal": "horizontal",
"Vertical": "vertical"
}
}
}
},
"Stepper Step": {
"figmaComponent": "Stepper Step",
"figmaNodeId": "1391:356",
"figmaPage": "Stepper",
"component": "StepperStep",
"import": "import { StepperStep } from 'ionbase-ui';",
"docs": "components/stepper-step/index.html.md",
"props": {
"Status": {
"prop": "status",
"values": {
"Incomplete": "incomplete",
"Complete": "complete",
"Error": "error"
}
},
"Current": {
"prop": "isCurrent",
"values": {
"True": true,
"False": false
}
},
"Label#1391:0": {
"prop": "children"
},
"Description#1391:13": {
"prop": "description"
},
"Show Description#1391:26": {
"prop": "description",
"note": "false means description is omitted"
},
"Number#1391:39": {
"ignore": "the step’s position in the list; code numbers steps itself"
},
"Orientation": {
"ignore": "set on the parent Stepper, not per step — drawn per step only because the connector’s geometry differs"
},
"Show Connector#1391:52": {
"ignore": "code draws a connector after every step but the last; Figma needs it switched off by hand on the last instance"
}
}
},
"Streaming Text": {
"figmaComponent": "Streaming Text",
"figmaNodeId": "1164:248",
"figmaPage": "Streaming Text",
"component": "StreamingText",
"import": "import { StreamingText } from 'ionbase-ui';",
"docs": "components/streaming-text/index.html.md",
"props": {
"Streaming": {
"prop": "isStreaming",
"values": {
"True": true,
"False": false
}
},
"Text#1164:0": {
"prop": "children"
}
}
},
"Table Batch Bar": {
"figmaComponent": "Table Batch Bar",
"figmaNodeId": "1523:753",
"figmaPage": "Table",
"component": "TableBatchBar",
"import": "import { TableBatchBar } from 'ionbase-ui';",
"docs": "components/table-batch-bar/index.html.md",
"props": {
"Count#1523:0": {
"prop": "count",
"note": "A number, not a string: the bar writes \"5 selected\" itself, formatted for the locale, and says \"All 128 selected\" once every matching row is. Change the words through `labels`."
},
"Show Select All#1523:1": {
"prop": "onSelectAll",
"note": "Not a switch in code: the offer appears on its own whenever fewer than `total` rows are selected and `onSelectAll` is passed. Leave `onSelectAll` out to keep selection page-by-page."
}
}
},
"Table Cell": {
"figmaComponent": "Table Cell",
"figmaNodeId": "174:103",
"figmaPage": "Table",
"component": "TableCell",
"import": "import { TableCell } from 'ionbase-ui';",
"docs": "components/table-cell/index.html.md",
"props": {
"Type": {
"prop": "header",
"when": {
"Header": true
},
"note": "Body is the default "
},
"Align": {
"prop": "align",
"values": {
"Leading": "leading",
"Trailing": "trailing"
}
},
"Show Divider#174:38": {
"prop": "showDivider"
},
"Content#174:37": {
"prop": "children"
},
"Show Content#174:36": {
"prop": "children"
},
"Density": {
"ignore": "density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table"
}
}
},
"Table Expansion Row": {
"figmaComponent": "Table Expansion Row",
"figmaNodeId": "1652:796",
"figmaPage": "Table",
"component": "TableRow",
"import": "import { TableRow } from 'ionbase-ui';",
"docs": "components/table-row/index.html.md",
"note": "Not a component of its own: the second row a TableRow renders when its `expansion` is open. Content is `expansion.content`, in one cell across every column, starting past the toggle. It takes its row's stripe and selection.",
"props": {}
},
"Table Row": {
"figmaComponent": "Table Row",
"figmaNodeId": "175:605",
"figmaPage": "Table",
"component": "TableRow",
"import": "import { TableRow } from 'ionbase-ui';",
"docs": "components/table-row/index.html.md",
"props": {
"State": {
"prop": "isSelected",
"when": {
"Selected": true,
"Selected-Hover": true
},
"note": "Hover is CSS"
},
"Show Expander#1652:0": {
"prop": "expansion",
"note": "takes `{ 'aria-label', content, isExpanded?, defaultExpanded?, onExpandedChange? }`, not a boolean — name it for the row, \"Details for run 4821\". In a head row it is `{ label }`, the header cell over the toggles. Open, the row loses its bottom rule and Table Expansion Row sits under it."
},
"Show Selection#175:12": {
"prop": "selection",
"note": "takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring"
},
"Density": {
"ignore": "set once on Table; see Table Cell"
}
}
},
"Table Sort Indicator": {
"figmaComponent": "Table Sort Indicator",
"figmaNodeId": "1444:761",
"figmaPage": "Table",
"component": "TableCell",
"import": "import { TableCell } from 'ionbase-ui';",
"docs": "components/table-cell/index.html.md",
"props": {
"Direction": {
"prop": "sortDirection",
"values": {
"None": "none",
"Ascending": "ascending",
"Descending": "descending"
},
"note": "drawn in a header Cell Text’s Trailing Icon slot; in code the header cell draws it and the label is a button. Set sortDirection on every sortable header and wire onSort, or use useTableSort’s sortProps(column)"
}
}
},
"Tabs": {
"figmaComponent": "Tabs",
"figmaNodeId": "157:126",
"figmaPage": "Tabs",
"component": "Tabs",
"import": "import { Tabs } from 'ionbase-ui';",
"docs": "components/tabs/index.html.md",
"props": {
"Type": {
"prop": "type",
"values": {
"Pill": "pill",
"Underline": "underline"
}
},
"Orientation": {
"prop": "orientation",
"values": {
"Horizontal": "horizontal",
"Vertical": "vertical"
}
}
}
},
"Tabs Item": {
"figmaComponent": "Tabs Item",
"figmaNodeId": "156:259",
"figmaPage": "Tabs",
"component": "TabItem",
"import": "import { TabItem } from 'ionbase-ui';",
"docs": "components/tab-item/index.html.md",
"note": "TabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.",
"example": "Panel content ",
"props": {
"Label#156:216": {
"ignore": "TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract."
},
"Type": {
"ignore": "set on the parent Tabs, not per item"
},
"Size": {
"ignore": "set on the parent Tabs, not per item"
},
"State": {
"ignore": "selection is the Tabs collection's state; Disabled is disabledKeys on Tabs"
},
"Show Label#156:218": {
"ignore": "a tab without a label is a tab that cannot be named"
},
"Show Leading Icon#156:217": {
"ignore": "not yet in the code component"
},
"Leading Icon#156:220": {
"ignore": "not yet in the code component"
},
"Show Trailing#156:219": {
"ignore": "not yet in the code component"
},
"Trailing#156:221": {
"ignore": "not yet in the code component"
},
"Focused#189:0": {
"ignore": "drawn focus ring; :focus-visible in code"
}
}
},
"Tag": {
"figmaComponent": "Tag",
"figmaNodeId": "1448:290",
"figmaPage": "Tag",
"component": "Tag",
"import": "import { Tag } from 'ionbase-ui';",
"docs": "components/tag/index.html.md",
"note": "Tag is a collection item and takes no props of its own. Size and removability are set once on the parent TagGroup, so every tag in a group matches.",
"example": "Team: Finance ",
"props": {
"Label#1448:0": {
"ignore": "Tag’s label is its children, a collection prop the TypeScript checker cannot see — see Tag’s contract."
},
"Show Remove#1448:9": {
"ignore": "removability is TagGroup’s onRemove: pass it and every tag in the group shows the button, leave it out and none do"
},
"Size": {
"ignore": "set once on the parent TagGroup, not per tag"
},
"State": {
"ignore": "Hover is CSS and Focus is :focus-visible; Disabled is disabledKeys on TagGroup"
}
}
},
"Tag Group": {
"figmaComponent": "Tag Group",
"figmaNodeId": "1448:333",
"figmaPage": "Tag",
"component": "TagGroup",
"import": "import { TagGroup } from 'ionbase-ui';",
"docs": "components/tag-group/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md"
}
},
"Label#1448:18": {
"prop": "label"
},
"Show Label#1448:21": {
"prop": "label",
"note": "false means no visible label — pass aria-label instead, the group still needs a name"
}
}
},
"Textarea": {
"figmaComponent": "Textarea",
"figmaNodeId": "1301:334",
"figmaPage": "Textarea",
"component": "Textarea",
"import": "import { Textarea } from 'ionbase-ui';",
"docs": "components/textarea/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled, Read-only is isReadOnly — both react-aria props, mirroring Input."
},
"Value#1301:0": {
"prop": "value"
}
}
},
"Time Field": {
"figmaComponent": "Time Field",
"figmaNodeId": "1453:805",
"figmaPage": "Date Picker",
"component": "TimeField",
"import": "import { TimeField } from 'ionbase-ui';",
"docs": "components/time-field/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Date Picker, whose box this is. The value text shows the reader’s own format; the prop is 24-hour HH:MM"
}
}
},
"Timeline": {
"figmaComponent": "Timeline",
"figmaNodeId": "1647:291",
"figmaPage": "Timeline",
"component": "Timeline",
"import": "import { Timeline } from 'ionbase-ui';",
"docs": "components/timeline/index.html.md",
"note": "An ordered list of Timeline Items, newest first. Name it with `aria-label` in code — the history of what.",
"props": {}
},
"Timeline Item": {
"figmaComponent": "Timeline Item",
"figmaNodeId": "1647:290",
"figmaPage": "Timeline",
"component": "TimelineItem",
"import": "import { TimelineItem } from 'ionbase-ui';",
"docs": "components/timeline-item/index.html.md",
"note": "Title is `title` — what happened, as a sentence; Actor is `actor`; Time is `timestamp`, shown as its label or `timestampLabel`; Detail is `children`. The text layers are edited directly, and the Separator is drawn only with an actor.",
"props": {
"Marker": {
"ignore": "Not a prop: Icon is an item given `icon`, Dot is one without. The icon is decoration, hidden from assistive tech; what happened is in the title."
},
"Line": {
"ignore": "Not a prop: the line joins each event to the next and stops at the last one on its own. No is the last item in a Timeline."
}
}
},
"Toast": {
"figmaComponent": "Toast",
"figmaNodeId": "820:1655",
"figmaPage": "Toast",
"component": "Toast",
"import": "import { Toast } from 'ionbase-ui';",
"docs": "components/toast/index.html.md",
"props": {
"Intent": {
"prop": "intent",
"values": {
"Neutral": "neutral",
"Primary": "primary",
"Success": "success",
"Warning": "warning",
"Error": "error",
"Information": "information"
}
},
"Title#820:0": {
"prop": "title"
},
"Show Title#820:14": {
"prop": "title"
},
"Message#820:7": {
"prop": "message"
},
"Show Message#820:21": {
"prop": "message"
},
"Show Action#820:28": {
"prop": "action",
"note": "one action only — a second belongs in a Modal"
},
"Show Dismiss#820:35": {
"prop": "dismissLabel",
"note": "the dismiss control is always rendered; only its label is configurable"
}
}
},
"Toggle": {
"figmaComponent": "Toggle",
"figmaNodeId": "88:323",
"figmaPage": "Toggle",
"component": "Toggle",
"import": "import { Toggle } from 'ionbase-ui';",
"docs": "components/toggle/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Small": "sm",
"Medium": "md",
"Large": "lg"
}
},
"Color": {
"prop": "intent",
"values": {
"Brand": "brand",
"Neutral": "neutral",
"Danger": "danger"
}
},
"State": {
"ignore": "On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop"
},
"Label#88:0": {
"prop": "children"
},
"Show Label#88:19": {
"prop": "children",
"note": "false means aria-label is required"
},
"Focused#188:19": {
"ignore": "drawn focus ring; :focus-visible in code"
}
}
},
"Toggletip": {
"figmaComponent": "Toggletip",
"figmaNodeId": "1528:263",
"figmaPage": "Tooltip",
"component": "Toggletip",
"import": "import { Toggletip } from 'ionbase-ui';",
"docs": "components/toggletip/index.html.md",
"props": {
"Size": {
"prop": "size",
"values": {
"Medium": "md",
"Small": "sm"
}
},
"State": {
"prop": "isOpen",
"when": {
"Open": true
},
"note": "Open is runtime, not a prop to set: a press opens it and Escape, a press outside or focus leaving closes it. Pass isOpen only to control it from outside."
},
"Text#1528:0": {
"prop": "children",
"note": "The explanation, plus at most one Link or Button after it — Figma's link line is a Link child in code. Name the button with aria-label for the subject: \"About log retention\"."
}
}
},
"Tool Call": {
"figmaComponent": "Tool Call",
"figmaNodeId": "1392:391",
"figmaPage": "Tool Call",
"component": "ToolCall",
"import": "import { ToolCall } from 'ionbase-ui';",
"docs": "components/tool-call/index.html.md",
"props": {
"Status": {
"prop": "status",
"values": {
"Pending": "pending",
"Active": "active",
"Done": "done",
"Failed": "failed",
"Skipped": "skipped"
}
},
"Expanded": {
"prop": "isExpanded",
"values": {
"True": true,
"False": false
},
"note": "or defaultExpanded, uncontrolled"
},
"Title#1392:0": {
"prop": "title"
},
"Name#1392:11": {
"prop": "name"
},
"Show Name#1392:22": {
"prop": "name",
"note": "false means name is omitted"
},
"Duration#1392:33": {
"prop": "durationMs",
"note": "milliseconds in code; Figma shows the formatted text (“1.2s”, “340ms”)"
},
"Show Duration#1392:44": {
"prop": "durationMs",
"note": "false means durationMs is omitted"
},
"Has Details#1392:55": {
"ignore": "not a prop: code shows the chevron and makes the header a button when input or output is passed"
},
"Error Message#1392:66": {
"prop": "errorMessage"
}
}
},
"Toolbar": {
"figmaComponent": "Toolbar",
"figmaNodeId": "1517:583",
"figmaPage": "Toolbar",
"component": "Toolbar",
"import": "import { Toolbar } from 'ionbase-ui';",
"docs": "components/toolbar/index.html.md",
"props": {
"Orientation": {
"prop": "orientation",
"values": {
"Horizontal": "horizontal",
"Vertical": "vertical"
},
"note": "Horizontal moves with ← →, vertical with ↑ ↓. The children are the caller's: Buttons, a Divider between groups (vertical in a horizontal toolbar), and a MenuTrigger with an icon-only Button for the overflow. Name it with aria-label for what it acts on."
}
}
},
"Tooltip": {
"figmaComponent": "Tooltip",
"figmaNodeId": "801:68",
"figmaPage": "Tooltip",
"component": "Tooltip",
"import": "import { Tooltip } from 'ionbase-ui';",
"docs": "components/tooltip/index.html.md",
"props": {
"Placement": {
"prop": "placement",
"values": {
"Top": "top",
"Bottom": "bottom",
"Left": "left",
"Right": "right"
}
},
"Label#801:0": {
"prop": "label"
},
"Title#801:5": {
"prop": "title"
},
"Show Title#801:10": {
"prop": "title"
}
}
},
"Tree View": {
"figmaComponent": "Tree View",
"figmaNodeId": "1542:4542",
"figmaPage": "Tree View",
"component": "TreeView",
"import": "import { TreeView } from 'ionbase-ui';",
"docs": "components/tree-view/index.html.md",
"props": {
"Selection": {
"prop": "selectionMode",
"values": {
"None": "none",
"Single": "single",
"Multiple": "multiple"
},
"note": "Multiple is where rows draw their check; the Figma rows show it with Show Check on. The rows themselves are `items` — see Tree View Item."
}
}
},
"Tree Grid": {
"figmaComponent": "Tree Grid",
"figmaNodeId": "1688:1129",
"figmaPage": "Tree Grid",
"component": "TreeGrid",
"import": "import { TreeGrid } from 'ionbase-ui';",
"docs": "components/tree-grid/index.html.md",
"props": {
"Selection": {
"prop": "selectionMode",
"values": {
"None": "none",
"Multiple": "multiple"
},
"note": "Multiple gives each row a Checkbox and the header a select-all, indeterminate while some rows are picked. `single` is not drawn: it is Multiple's tint without the boxes. The rows are `items` and the columns `columns` — see Tree Grid Row. The focused row and the picked row drawn are one moment of use, not props"
}
}
},
"Truncated Text": {
"figmaComponent": "Truncated Text",
"figmaNodeId": "1637:287",
"figmaPage": "Truncated Text",
"component": "TruncatedText",
"import": "import { TruncatedText } from 'ionbase-ui';",
"docs": "components/truncated-text/index.html.md",
"note": "Text is `children`, the whole text as a string; the layer is edited directly. Figma cuts it with the text layer's own truncation and max lines — `lines` in code. The tooltip is Tooltip's own component and is not drawn here: in code it appears only when the text is cut, on hover and on focus. The text takes the font of what it sits in.",
"props": {
"Overflow": {
"prop": "overflow",
"values": {
"Tooltip": "tooltip",
"Expand": "expand"
}
},
"State": {
"ignore": "Not a prop: Expanded is what Show more does, and Show less undoes. Collapsed is the text cut to `lines`."
}
}
},
"Dual Listbox": {
"figmaComponent": "Dual Listbox",
"figmaNodeId": "1680:527",
"figmaPage": "Dual Listbox",
"component": "DualListbox",
"import": "import { DualListbox } from 'ionbase-ui';",
"docs": "components/dual-listbox/index.html.md",
"props": {
"Label#1680:0": {
"prop": "label"
},
"Description#1680:7": {
"prop": "description",
"note": "on State=Invalid this is the `errorMessage`, which replaces the description while `isInvalid` is set"
},
"Show Description#1680:14": {
"prop": "description",
"note": "false means description is omitted"
},
"Reorderable#1680:21": {
"prop": "isReorderable",
"note": "shows Move up and Move down beside the chosen list"
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Disabled is isDisabled, which disables every option and button. The chosen list's red edge is the invalid state; the picked options and enabled buttons drawn are one moment of use, not props"
},
"Layout": {
"ignore": "not a prop: the lists stack below 30rem of the field's own width through a container query, the same call Setting Row makes for its Layout axis"
}
}
},
"Calendar": {
"figmaComponent": "Calendar",
"figmaNodeId": "1714:1267",
"figmaPage": "Date Picker",
"component": "Calendar",
"import": "import { Calendar } from 'ionbase-ui';",
"docs": "components/calendar/index.html.md",
"props": {
"Label#1714:0": {
"prop": "label"
},
"Description#1714:4": {
"prop": "description",
"note": "replaced by `errorMessage` while invalid, as Invalid draws it"
},
"Show Description#1714:8": {
"prop": "description"
},
"State": {
"prop": "isInvalid",
"when": {
"Invalid": true
},
"note": "Disabled is isDisabled; the chosen day stays marked on the disabled surface. Hover and focus are the days' own, drawn by Calendar Day"
}
}
},
"Split Pane": {
"figmaComponent": "Split Pane",
"figmaNodeId": "1719:286",
"figmaPage": "Split Pane",
"component": "SplitPane",
"import": "import { SplitPane } from 'ionbase-ui';",
"docs": "components/split-pane/index.html.md",
"props": {
"Orientation": {
"prop": "orientation",
"values": {
"Horizontal": "horizontal",
"Vertical": "vertical"
},
"note": "Horizontal is side by side, with a vertical divider; it stacks at `collapse`, mobile by default"
},
"State": {
"ignore": "The divider's own states: Hover is :hover, Focus is :focus-visible and a drag, both CSS. The share the Start pane takes is `defaultSize` or `size`, in percent — a value, not a variant"
}
}
}
},
"unmapped": {
".Notification": "One row of Notifications Panel — `notifications[n]` in code, `{ id, title, description, timestamp, isRead, href, icon }`. There is no row export: the panel builds its rows from `notifications`, because the group a row falls in, its order and its read toggle are the panel's to know. Read is `isRead`; Unread draws the dot and the semibold title, and code also reads \"Unread:\" before the title. The toggle is Mark as read (mail) or Mark as unread (mail-open), shown when `onReadChange` is given. The leading dot marks it private.",
".Status Indicator": "The dot Avatar draws in its corners. Avatar owns both instances — Top is Intent=Primary with the check glyph, Bottom is Intent=Success with Show Icon off — and exposes them as `topIndicator` / `bottomIndicator`.\n\nThe leading dot in the name is Figma's own marker for a private component: it is excluded from the published library, so a designer cannot place one on a canvas even if they wanted to. That settles a question this entry used to argue: it is internal by the file's own declaration, not merely by our reading of it. The same call Line, Progress and Progress Heading get for being internal to ScrollProgress — with better evidence.\n\nMap it only if the dot is ever removed.",
"Calendar Popover": "The open calendar the three pickers render in their popover — `SingleCalendar` and `RangeCalendar`, internal. Mode=Single is DatePicker’s and DateTimePicker’s, Mode=Range is DateRangePicker’s; Months=Two is `visibleMonths={2}`, Show Presets is `presets` and Show Clear is `isClearable`, all on DateRangePicker. Drawn separately because a frame cannot both hug a field and overlay a grid on it — the same reason Combobox Menu is its own frame. The calendar in the page, with a label of its own, is Calendar.",
"Calendar Day": "A day cell inside Calendar — internal to it the way Pagination Item is internal to Pagination. A caller never places one; `isDateUnavailable`, `minValue` and `maxValue` on the pickers decide which state each day draws in.",
"Chart Legend Item": "One entry of Chart Legend — `items[n]` in code, `{ label, series }`. Its Shape follows the legend’s `shape`; Series picks chart/1…8. Internal to the legend.",
"Chart Tooltip Row": "One entry of Chart Tooltip — `rows[n]` in code, `{ label, value, series }`. Series picks the swatch from chart/1…8, exactly as `series` does. Internal to the tooltip the way Pagination Item is internal to Pagination.",
"Combobox Menu": "The list Combobox opens. It is not a separate export: the React component renders its own menu, because the two are one control and splitting them would let a caller mount a listbox with no combobox to own it. Drawn separately in Figma because a frame cannot both hug a field and overlay a list on top of it.",
"Command Palette Item": "One row of the palette, drawn so Active and Disabled can be seen. There is no code export behind it and there should not be: rows are built from the palette's `commands` array, where the Label, Description, Icon and shortcut are fields of one command — `label`, `description`, `icon`, `shortcut` — and Active is the keyboard's position, not a prop. The same call Combobox Menu gets.",
"Form Field": "Label, helper text and error wiring are built into Input and Select rather than a separate wrapper — the wrapper is how Figma composes them, not how React does.",
"Line": "An internal part of the Scroll Progress rail, not a component a caller composes.",
"Pagination Item": "The cell inside Pagination — a page number, an arrow or the truncation ellipsis. Figma needs it as its own set to hold the Size x State matrix; a caller never places one, so it is internal to Pagination the way Line and Progress are internal to Scroll Progress.",
"Progress": "As Line — internal to ScrollProgress.",
"Progress Heading": "As Line — internal to ScrollProgress.",
"Screen Frame": "The frame FullCard draws around its media slot. The component owns it, so there is nothing for a caller to place.",
"Side Menu Item": "A 32-tall side-navigation row on the Side Menu page, which predates Sidebar. It shared the name Menu Item with the real one (82:217) until 25 Sep 2026, and because the export keyed on the name it silently replaced it — the mapping, the gates and the Dev Mode block all pointed here. Sidebar Item is the side-navigation row code ships.",
"Side Menu Section Title": "The section heading of the same pre-Sidebar side menu. Menu Section Title (1468:271) is the menu's own, drawn on the Menu page; Sidebar Section is the side navigation's.",
"Table/Cell Text": "TableCell covers Figma's Table Cell and Cell Text together; the two are never used apart in the design. Recorded in TableCell's contract.",
"Multi Select Menu": "The list MultiSelect opens, with a check on each row. Not a separate export, for Combobox Menu's reason: the list and the field are one control, and a listbox with nothing to own it is not a thing a caller should be able to mount. Drawn separately because a frame cannot both hug a field and overlay a list.",
"Tree View Item": "One row of Tree View — `items[n]` in code, `{ id, label, icon, description, children, isDisabled }`. There is no row export and there should not be: the tree builds its rows from `items`, because a row's level, position among its siblings and open state are the tree's to know, not the row's. Kind is whether the item has `children` and is in `expandedKeys`; Level is its depth; State Selected is `selectedKeys`, Disabled is `isDisabled`, Hover and Focus are runtime. Label, Icon and Description are the item's fields; Show Check follows the tree's `selectionMode=\"multiple\"`.",
"Tree Grid Row": "One row of Tree Grid — `items[n]` in code, `{ id, children, textValue, isDisabled }`, with its cells from `columns[n].cell(item)`. There is no row export and there should not be: the grid builds its rows from `items`, because a row's level, place among its siblings and open state are the grid's to know, not the row's. Kind is whether the item has `children` and is in `expandedKeys`; Level is its depth; State Selected is `selectedKeys`, Focus the keyboard's ring; Show Selection is `selectionMode=\"multiple\"`. Label is the first column's cell, and Runs and Cost stand for the other columns — exposed Table Cells, edited from the row. Density is not drawn: it is Table Cell's, and TreeGrid's `density` moves the same padding.",
"List Item": "One row of List — `items[n]` in code, `{ id, label, description, leading, meta, href, isDisabled }`, plus the list's `renderActions(item)`. There is no row export: the list builds its rows from `items`, because a row's keyboard position, selection and link behaviour are the list's to know. Selection follows the list's `selectionMode` (Multiple draws the Checkbox), and Density the list's `density`; State Selected is `selectedKeys`, Disabled is `isDisabled`, Hover and Focus are runtime. Label and Description are the item's fields; Show Leading, Show Meta and Show Actions are whether `leading`, `meta` and `renderActions` are given.",
".Table Expander": "The toggle inside Table Row's Expander cell, shown by `Show Expander`. TableRow draws it from `expansion` — a disclosure button named by `expansion['aria-label']`, with `aria-expanded`; Collapsed points right and Expanded points down. The leading dot marks it private, as `.Status Indicator` and `.Notification` are.",
"Dual Listbox Option": "One option of DualListbox — `options[n]` in code, `{ value, label, description, isDisabled }`. There is no option export: the listbox builds its options, because which are picked, where focus is and what a move does are the field's to know. State Picked is an option picked to be moved, Focus the keyboard's ring, Disabled `isDisabled`; Label and Description are the option's fields, Show Description whether `description` is given.",
".App Switcher Tile": "One product in App Switcher's grid — `apps[n]` in code, `{ id, name, href, description, icon }`. There is no tile export: the switcher builds its links from `apps`, because which one is current (`currentApp`), closing on a press and the name-and-description wiring are the switcher's to know. Current is `aria-current=\"true\"` with the border and the selected tint; Hover and Focus are the browser's. Name, Description and Icon are the app's `name`, `description` and `icon`; Show Description off is an app with no `description`. The leading dot marks it private."
},
"codeUnmapped": {
"DateRangePicker": "Drawn, but not as a set of its own: its field is Date Picker Type=Range and its calendar is Calendar Mode=Range. A Figma set maps to exactly one code component, and splitting one field into two sets to satisfy that would draw the same box twice. Read Date Picker’s Type note for the handoff.",
"Icon": "Figma has no Icon component; icons are vector assets dropped into slots. Icon is the React wrapper that gives any of them a size rung and an accessible label, so there is nothing on the Figma side to point at.",
"LogoMark": "Logo-Ionbase maps to Logo. Figma spells the no-wordmark case as that component's Type axis rather than a separate component; LogoMark is how code spells the same thing.",
"RadioGroup": "Figma draws Radio only. The group is the thing that owns the selected value, which a static frame cannot express — Figma's Radio State axis is ignored for exactly this reason. Its label, help, error and orientation are the shell drawn as Checkbox Group; the two groups share it in code as well.",
"ScrollProgress": "Drawn in Figma as its three parts — Line, Progress, Progress Heading — all of which the component owns internally. There is no whole-component frame to map.",
"Table": "Figma draws Table Row and Table Cell; the table itself is the caller assembling them. Density, the one property Table owns that Figma varies, is mapped on Table Cell. `maxHeight` and `stickyFirstColumn` are scroll behaviour, which a component cannot draw: the Table page's \"Example — sticky header (maxHeight)\" frame shows the header held over scrolling rows in a prototype, and the column is held the same way sideways.",
"TableBody": "As TableHead.",
"TableHead": "As Table — a code-side grouping element. Figma expresses a header row as a Table Row variant, not a separate component.",
"ToastProvider": "Figma draws Toast, which is mapped. The provider is placement, queueing and the live region — runtime behaviour with nothing to draw.",
"MenuTrigger": "Composition, not a drawing: a Button followed by a Menu, both already drawn and mapped. What MenuTrigger adds — open state, positioning, aria-haspopup and aria-expanded, focus on open and return on close — is runtime behaviour a static frame cannot hold, the same reason RadioGroup is here.",
"Fieldset": "Drawn as the shell of Checkbox Group: the legend, the helper and the Error recolour are Form Field's type, laid around a set of options. A Fieldset of Inputs is the caller composing Form Fields under that legend, so there is no separate frame to point at.",
"SidePanelLayout": "Layout, not a drawn component: the flex row a SidePanel sits in, content first. In Figma the Side Panel is placed beside the content on the frame; there is no row to draw.",
"ContextMenu": "Draws nothing of its own: what opens is Menu — the same Menu component, rows and sections as the thing's ⋯ menu — placed at the pointer instead of under a button. A second Menu set drawn for it would be a copy that drifts. Design the menu as Menu; where it opens is behaviour.",
"Banner": "Draws nothing of its own: it is Alert with Layout=Banner (812:1902), the one-line row drawn there. What it adds is behaviour — a dismissal remembered under dismissKey, focus moved forward on dismiss, its place in the app shell. A Banner set would be a copy of Alert's that drifts.",
"InlineLoading": "Draws nothing of its own: each state is a Status Indicator — Intent=Progress for Saving…, Success for Saved, Error for Not saved — placed beside the control. What it adds is behaviour a frame cannot hold: a live region mounted before its words change, and Saved going away after a delay. An InlineLoading set would be three copies of Status Indicator's variants that drift.",
"TableColumnsMenu": "A composition of Button and Menu (Type=Multi), both drawn and mapped: a secondary small Button opening a multiple-selection Menu, one checked row per shown column. The Table page's \"Example — columns (resize and visibility)\" frame shows it open beside a table, with the Agent header's resize handle.",
"Stack": "Figma's auto layout is Stack: a frame's direction, its gap bound to a spacing variable, and its alignment are the same three decisions. Every component in the file is already built that way, so a Stack component would be a frame wrapped in a frame. In code it exists to keep hand-written flex CSS off the page.",
"Grid": "Figma's auto layout has a grid mode, and it is Grid: a frame's columns, its row and column gaps bound to spacing variables, and each cell's alignment are the same decisions. A Grid component would be a frame wrapped in a frame. In code it exists to keep hand-written grid CSS and its own breakpoints off the page.",
"ThemeZone": "Figma's variable modes are ThemeZone: a frame set to the Interface collection's Dark mode draws everything inside it dark, on a Light page, and a frame inside it can be set back to Light. It is a property of any frame, not a component to place. In code it exists for what the `data-theme` attribute leaves behind — plain text colour, `color-scheme`, and overlays portalled out of the zone.",
"I18nProvider": "A provider, not something drawn: it sets the locale for everything inside it and renders nothing of its own. Figma's counterpart for direction is a frame laid out right to left, which the logical properties in code already mirror.",
"Tour": "Drawn as Coachmark's Step axis, not a set of its own: a tour is Coachmarks in a row, and each step is a Coachmark with a count and Back, Next or Done in its footer. A Figma set maps to one code component, and a Tour set would draw the same callout twice."
}
}