{ "name": "Orbit DS", "generated": "pnpm docs:build", "counts": { "total": 87, "primitives": 44, "patterns": 43 }, "components": [ { "name": "alert", "title": "Alert", "layer": "primitive", "description": "Alert is the inline banner for page- or section-level messages.", "category": "Feedback", "importPath": "@orbit/ui/components/alert", "path": "/components/alert", "exports": [ "Alert", "AlertTitle", "AlertDescription", "AlertAction" ], "status": "stable", "doc": { "summary": "A message about the page or a section of it.", "guidance": [ "Tones mirror Badge, so a status means the same thing wherever it appears. An alert persists: use it when the reader must still see the message after they look away. A toast is the right choice for a result that may be missed.", "Prefer the `InlineAlert` pattern, which wires the icon, the action slot and the dismiss control for you." ], "avoid": "Do NOT make an alert dismissible when it describes a blocking condition - the reader can hide a problem they cannot yet fix.", "example": "\n \n Two applications are degraded\n Instances in eu-west-1 are responding slowly.\n", "status": "stable", "useWhen": [ "A condition applies to the whole page or a whole section." ], "avoidWhen": [ "The message concerns one field - that is FieldError." ], "a11y": [ "Renders role=\"alert\", so it is announced when it appears. Do not mount one on page load - nothing has changed yet.", "The tone is carried by an icon and the text, never by colour alone." ], "related": [], "alternative": [ "inline-alert" ] }, "subComponents": [ { "name": "AlertTitle", "anchor": "alert-title", "summary": "The message's one-line heading, weighted above the description.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "AlertDescription", "anchor": "alert-description", "summary": "Supporting detail under the title, in muted ink. Links inside it are underlined so they survive the tinted ground.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "AlertAction", "anchor": "alert-action", "summary": "A compact control pinned to the alert's top-right corner - a dismiss or a single fix, not a toolbar.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } } ], "variants": [ { "prop": "variant", "values": [ { "value": "default", "description": null }, { "value": "info", "description": null }, { "value": "success", "description": null }, { "value": "warning", "description": null }, { "value": "destructive", "description": null } ], "default": "default" } ], "props": [], "inherits": [ "React.ComponentProps<\"div\">", "VariantProps" ], "inherited": { "groups": [ { "source": "React.ComponentProps<\"div\">", "props": [ { "name": "variant", "type": "\"default\" | \"info\" | \"success\" | \"warning\" | \"destructive\" | null", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" }, "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "utils" ], "usedBy": [ "inline-alert" ], "relatedTo": [], "alternativeFor": [], "oftenUsedWith": [ "button" ] }, { "name": "avatar", "title": "Avatar", "layer": "primitive", "description": "Avatar primitives for Orbit DS - an image with an initials fallback.", "category": "Data display", "importPath": "@orbit/ui/components/avatar", "path": "/components/avatar", "exports": [ "Avatar", "AvatarImage", "AvatarFallback", "AvatarBadge", "AvatarGroup", "AvatarGroupCount" ], "status": "stable", "doc": { "summary": "A person or entity, as an image with an initials fallback.", "guidance": [ "Always provide the fallback: a broken or slow image must not leave an empty circle, and many records have no image at all.", "Leave `alt` empty when the name is already beside the avatar - otherwise a screen reader reads it twice. An avatar is decoration next to a name, not a substitute for one." ], "avoid": null, "example": "\n \n {initials}\n", "status": "stable", "useWhen": [ "A person or team needs identifying in a row, a header or a stack." ], "avoidWhen": [ "You need a logo or an entity icon - that is not a person." ], "a11y": [ "The image is decorative: alt is empty and the name is supplied by the text beside it, so a screen reader hears it once.", "The fallback initials are readable text, not an image, and inherit the surrounding contrast." ], "related": [], "alternative": [] }, "subComponents": [ { "name": "AvatarImage", "anchor": "avatar-image", "summary": "The picture. Keep alt empty when the name sits beside the avatar, so a screen reader hears it once.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "AvatarPrimitive.Image.Props" ], "inherited": { "groups": [ { "source": "ImgHTMLAttributes", "props": [ { "name": "alt", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "crossOrigin", "type": "CrossOrigin", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "decoding", "type": "\"auto\" | \"async\" | \"sync\"", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "fetchPriority", "type": "\"auto\" | \"high\" | \"low\"", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "height", "type": "string | number", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "loading", "type": "\"eager\" | \"lazy\"", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "referrerPolicy", "type": "HTMLAttributeReferrerPolicy", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "sizes", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "src", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "srcSet", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "useMap", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "width", "type": "string | number", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null } ] }, { "source": "AvatarPrimitive.Image.Props", "props": [ { "name": "className", "type": "string | ((state: AvatarImageState) => string)", "required": false, "defaultValue": null, "description": "CSS class applied to the element, or a function that returns a class based on the component's state.", "detail": null, "typeParts": null }, { "name": "render", "type": "ReactElement> | ComponentRenderFn, HTMLImageElement>, AvatarImageState>", "required": false, "defaultValue": null, "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.", "detail": null, "typeParts": [ { "text": "ReactElement", "href": "https://react.dev/reference/react/isValidElement" }, { "text": "> | ComponentRenderFn, HTMLImageElement>, AvatarImageState>" } ] }, { "name": "style", "type": "CSSProperties | ((state: AvatarImageState) => CSSProperties)", "required": false, "defaultValue": null, "description": "Style applied to the element, or a function that returns a style object based on the component's state.", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": " | ((state: AvatarImageState) => " }, { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": ")" } ] } ] }, { "source": "AvatarImageProps", "props": [ { "name": "onLoadingStatusChange", "type": "((status: ImageLoadingStatus) => void)", "required": false, "defaultValue": null, "description": "Callback fired when the loading status changes.", "detail": null, "typeParts": null } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "AvatarFallback", "anchor": "avatar-fallback", "summary": "What shows while the image loads or when there is none - initials, so the circle is never empty. Pass `name` to colour it deterministically per person.", "guidance": [], "avoid": null, "example": null, "props": [ { "name": "name", "type": "string", "required": false, "defaultValue": null, "description": "The person's full name, hashed to one of six token fills so the same person is the same colour everywhere. Without it the fallback stays neutral bg-muted.", "detail": null, "typeParts": null } ], "variants": [], "inherits": [ "AvatarPrimitive.Fallback.Props" ], "inherited": { "groups": [ { "source": "AvatarPrimitive.Fallback.Props", "props": [ { "name": "className", "type": "string | ((state: AvatarFallbackState) => string)", "required": false, "defaultValue": null, "description": "CSS class applied to the element, or a function that returns a class based on the component's state.", "detail": null, "typeParts": null }, { "name": "render", "type": "ReactElement> | ComponentRenderFn", "required": false, "defaultValue": null, "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.", "detail": null, "typeParts": [ { "text": "ReactElement", "href": "https://react.dev/reference/react/isValidElement" }, { "text": "> | ComponentRenderFn" } ] }, { "name": "style", "type": "CSSProperties | ((state: AvatarFallbackState) => CSSProperties)", "required": false, "defaultValue": null, "description": "Style applied to the element, or a function that returns a style object based on the component's state.", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": " | ((state: AvatarFallbackState) => " }, { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": ")" } ] } ] }, { "source": "AvatarFallbackProps", "props": [ { "name": "delay", "type": "number", "required": false, "defaultValue": "0", "description": "How long to wait before showing the fallback. Specified in milliseconds.", "detail": null, "typeParts": null } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "AvatarBadge", "anchor": "avatar-badge", "summary": "A small status dot docked on the avatar's bottom-right corner, sized with the avatar.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"span\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "AvatarGroup", "anchor": "avatar-group", "summary": "Overlapping avatars for a set of people, each ringed so the stack stays separable.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "AvatarGroupCount", "anchor": "avatar-group-count", "summary": "The +N tail of an AvatarGroup, standing in for the members not shown.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } } ], "variants": [], "props": [ { "name": "size", "type": "\"default\" | \"sm\" | \"lg\"", "required": false, "defaultValue": "default", "description": "sm for table rows and dense lists, lg for a profile header. Sizes the fallback text with it.", "detail": { "kind": "union", "members": [ "default", "sm", "lg" ] }, "typeParts": null } ], "inherits": [ "AvatarPrimitive.Root.Props" ], "inherited": { "groups": [ { "source": "AvatarPrimitive.Root.Props", "props": [ { "name": "className", "type": "string | ((state: AvatarRootState) => string)", "required": false, "defaultValue": null, "description": "CSS class applied to the element, or a function that returns a class based on the component's state.", "detail": null, "typeParts": null }, { "name": "render", "type": "ReactElement> | ComponentRenderFn", "required": false, "defaultValue": null, "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.", "detail": null, "typeParts": [ { "text": "ReactElement", "href": "https://react.dev/reference/react/isValidElement" }, { "text": "> | ComponentRenderFn" } ] }, { "name": "style", "type": "CSSProperties | ((state: AvatarRootState) => CSSProperties)", "required": false, "defaultValue": null, "description": "Style applied to the element, or a function that returns a style object based on the component's state.", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": " | ((state: AvatarRootState) => " }, { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": ")" } ] } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" }, "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "utils" ], "usedBy": [ "testimonial" ], "relatedTo": [], "alternativeFor": [], "oftenUsedWith": [ "board", "card", "combobox", "field", "status-badge" ] }, { "name": "badge", "title": "Badge", "layer": "primitive", "description": "Badge primitive for Orbit DS, including the tinted status tones used across admin data.", "category": "Data display", "importPath": "@orbit/ui/components/badge", "path": "/components/badge", "exports": [ "Badge" ], "status": "stable", "doc": { "summary": "A small label for a status, a count or an attribute.", "guidance": [ "Status is never colour alone: a Badge always carries text, so it survives colourblindness, greyscale printing and a screen reader. The `dot` marks live or in-flight states - omit it on terminal states and on classifications like tiers, where a pulse implies motion that is not happening.", "For a domain's own status vocabulary use `StatusBadge`, which maps values to tones through an explicit map - the same tone means different things in different domains, so the primitive deliberately does not guess." ], "avoid": null, "example": "Live\nDeploying\nProduction", "status": "stable", "useWhen": [ "Classifying something: an environment, a tier, a type." ], "avoidWhen": [ "The thing being shown is a state that changes - that is StatusBadge." ], "a11y": [ "The label is real text, so classification survives greyscale, colourblindness and a screen reader.", "The dot is aria-hidden - it marks in-flight state for the eye only." ], "related": [ "status-badge" ], "alternative": [] }, "subComponents": [], "variants": [ { "prop": "variant", "values": [ { "value": "default", "description": null }, { "value": "secondary", "description": null }, { "value": "neutral", "description": "Terminal or classificatory states that carry no urgency." }, { "value": "success", "description": null }, { "value": "warning", "description": null }, { "value": "destructive", "description": null }, { "value": "info", "description": null }, { "value": "outline", "description": null }, { "value": "ghost", "description": null }, { "value": "link", "description": null }, { "value": "stellar", "description": "The \"star New\" stellar pill: the brand spectrum announcing novelty or a\nlaunch. Never a status tone - status keeps its tinted triads - and\nnever more than one stellar pill per view." } ], "default": "default" } ], "props": [ { "name": "dot", "type": "boolean", "required": false, "defaultValue": null, "description": "Show a leading dot. Reserve it for live or transitional states - omit it on terminal states and on classifications like tiers.", "detail": null, "typeParts": null } ], "inherits": [ "useRender.ComponentProps<\"span\">" ], "inherited": { "groups": [ { "source": "useRender.ComponentProps<\"span\">", "props": [ { "name": "render", "type": "ReactElement> | ComponentRenderFn", "required": false, "defaultValue": null, "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.", "detail": null, "typeParts": [ { "text": "ReactElement", "href": "https://react.dev/reference/react/isValidElement" }, { "text": "> | ComponentRenderFn" } ] }, { "name": "variant", "type": "\"default\" | \"secondary\" | \"neutral\" | \"success\" | \"warning\" | \"destructive\" | \"info\" | \"outline\" | \"ghost\" | \"link\" | \"stellar\" | null", "required": false, "defaultValue": "default", "description": null, "detail": null, "typeParts": null } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" }, "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [ "utils" ], "usedBy": [ "delta-chip", "pricing-tier", "status-badge" ], "relatedTo": [ "status-badge" ], "alternativeFor": [], "oftenUsedWith": [ "button", "card", "cell", "detail-drawer", "gradient-orb", "item", "lunar-surface", "property-list", "status-badge" ] }, { "name": "breadcrumb", "title": "Breadcrumb", "layer": "primitive", "description": "Shows where the current page sits in the site hierarchy, as a nav landmark.", "category": "Navigation", "importPath": "@orbit/ui/components/breadcrumb", "path": "/components/breadcrumb", "exports": [ "Breadcrumb", "BreadcrumbList", "BreadcrumbItem", "BreadcrumbLink", "BreadcrumbPage", "BreadcrumbSeparator", "BreadcrumbEllipsis" ], "status": "stable", "doc": { "summary": "Where the current page sits in the hierarchy.", "guidance": [ "Renders a `nav` with an ordered list, so the trail is announced as a landmark rather than read as loose punctuation. The last item is a `BreadcrumbPage`, not a link, and carries `aria-current`.", "The separator is a slash rather than a chevron, and any single crumb can be overridden by passing children to `BreadcrumbSeparator`.", "A breadcrumb shows containment, not history - it is not a back button, and it must not change depending on how the reader arrived." ], "avoid": null, "example": "\n \n \n }>Documentation\n \n \n \n Status badge\n \n \n", "status": "stable", "useWhen": [ "A page sits inside a hierarchy the reader may want to climb." ], "avoidWhen": [ "The hierarchy is one level deep, or you mean a back button." ], "a11y": [ "A nav landmark labelled \"breadcrumb\", so it can be jumped to.", "Only the current page carries aria-current, and it is not a link." ], "related": [], "alternative": [] }, "subComponents": [ { "name": "BreadcrumbList", "anchor": "breadcrumb-list", "summary": "The ordered list holding the trail. Items and separators are its direct children.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"ol\">" ], "inherited": { "groups": [ { "source": "OlHTMLAttributes", "props": [ { "name": "reversed", "type": "boolean", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "start", "type": "number", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "type", "type": "\"a\" | \"i\" | \"1\" | \"A\" | \"I\"", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "BreadcrumbItem", "anchor": "breadcrumb-item", "summary": "One stop on the trail - wraps a BreadcrumbLink or, for the last stop, a BreadcrumbPage.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"li\">" ], "inherited": { "groups": [ { "source": "LiHTMLAttributes", "props": [ { "name": "value", "type": "string | number | readonly string[]", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "BreadcrumbLink", "anchor": "breadcrumb-link", "summary": "An ancestor the reader can navigate back to.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "useRender.ComponentProps<\"a\">" ], "inherited": { "groups": [ { "source": "AnchorHTMLAttributes", "props": [ { "name": "download", "type": "any", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "href", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "hrefLang", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "media", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "ping", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "referrerPolicy", "type": "HTMLAttributeReferrerPolicy", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "target", "type": "HTMLAttributeAnchorTarget", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null } ] }, { "source": "OlHTMLAttributes", "props": [ { "name": "type", "type": "\"a\" | \"i\" | \"1\" | \"A\" | \"I\"", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null } ] }, { "source": "useRender.ComponentProps<\"a\">", "props": [ { "name": "render", "type": "ReactElement> | ComponentRenderFn", "required": false, "defaultValue": null, "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.", "detail": null, "typeParts": [ { "text": "ReactElement", "href": "https://react.dev/reference/react/isValidElement" }, { "text": "> | ComponentRenderFn" } ] } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "BreadcrumbPage", "anchor": "breadcrumb-page", "summary": "The current page: not a link, and it carries aria-current so the trail's end is announced.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"span\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "BreadcrumbSeparator", "anchor": "breadcrumb-separator", "summary": "The divider between stops. Presentational and hidden from assistive technology - the list order already says it.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"li\">" ], "inherited": { "groups": [ { "source": "LiHTMLAttributes", "props": [ { "name": "value", "type": "string | number | readonly string[]", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "BreadcrumbEllipsis", "anchor": "breadcrumb-ellipsis", "summary": "The folded middle of a long trail. Decorative on its own - pair it with a menu holding the folded destinations, or they are unreachable.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"span\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } } ], "variants": [], "props": [], "inherits": [ "React.ComponentProps<\"nav\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" }, "dependencies": [ "@base-ui/react", "lucide-react" ], "registryDependencies": [ "utils" ], "usedBy": [], "relatedTo": [], "alternativeFor": [], "oftenUsedWith": [] }, { "name": "button", "title": "Button", "layer": "primitive", "description": "Button primitive for Orbit DS, built on Base UI with the Nova size ladder.", "category": "Actions", "importPath": "@orbit/ui/components/button", "path": "/components/button", "exports": [ "Button" ], "status": "stable", "doc": { "summary": "An action. Buttons do things; links go places.", "guidance": [ "The default variant is deep indigo, and there is exactly one primary action per view - if two buttons compete for the eye, neither reads as the answer. Sizes run `xs` through `lg` with matching `icon-*` variants; the default `h-8` is tuned for dense admin screens rather than marketing pages. `xl` is the one marketing-scale size - a 44px hero or CTA-band action, never an admin control.", "`destructive` is the tinted style for menus, toolbars and row actions. `destructive-solid` is reserved for the confirming button of a destructive dialog, where it must outrank Cancel.", "A disabled button that must explain itself takes `focusableWhenDisabled` with `disabled`: it renders `aria-disabled` instead of the native attribute, so it stays hoverable and focusable - which is what lets a Tooltip open on it - while Base UI still blocks activation. A natively disabled button fires no events at all.", "An icon-only button still needs an accessible name - give it `aria-label`." ], "avoid": "Do NOT use a Button for navigation: render an anchor, so middle-click and open-in-new-tab behave.", "example": "\n\n", "status": "stable", "useWhen": [ "Something happens when it is pressed." ], "avoidWhen": [ "It navigates - render an anchor, so middle-click and open-in-new-tab work." ], "a11y": [ "An icon-only button needs aria-label. The icon is not a name.", "Renders a real button, so Enter and Space activate it and it appears in the tab order.", "The focus ring is never removed; it is a 3px ring that clears the button's own border." ], "related": [], "alternative": [] }, "subComponents": [], "variants": [ { "prop": "variant", "values": [ { "value": "default", "description": null }, { "value": "outline", "description": null }, { "value": "secondary", "description": null }, { "value": "ghost", "description": null }, { "value": "destructive", "description": null }, { "value": "destructive-solid", "description": "Solid danger. Reserve for the confirming action of a destructive\ndialog, where it must be the most prominent control on screen.\nEverywhere else - menu items, toolbars, row actions - use `destructive`." }, { "value": "link", "description": null }, { "value": "stellar", "description": "The brand spectrum as a CTA. Reserve for the SINGLE hero action of a\nmarketing or onboarding surface - at most one per journey. The default\naction colour stays deep indigo: stellar never appears in admin chrome,\ntoolbars or dialogs. White label on a warm gradient is a documented\nbrand exception to the contrast floor, which is why it is capped at\nthis one prominent control." }, { "value": "glass", "description": "Translucent white glass, for controls sitting on a permanently dark\nground - a LunarSurface, the rail. Never on a light surface: blur on\nlight reads as smudge. Hover borrows the border's 14% white, matching\nthe reference's 10-to-16% brightening." } ], "default": "default" }, { "prop": "size", "values": [ { "value": "default", "description": null }, { "value": "xs", "description": null }, { "value": "sm", "description": null }, { "value": "lg", "description": null }, { "value": "xl", "description": "Marketing-scale CTA - hero actions, pricing tiers, CTA bands. The 44px\nheight is a touch target, not an admin control: never in toolbars,\ndialogs or any admin chrome, where the ladder stops at `lg`." }, { "value": "icon", "description": null }, { "value": "icon-xs", "description": null }, { "value": "icon-sm", "description": null }, { "value": "icon-lg", "description": null } ], "default": "default" } ], "props": [], "inherits": [ "ButtonPrimitive.Props", "VariantProps" ], "inherited": { "groups": [ { "source": "ButtonHTMLAttributes", "props": [ { "name": "disabled", "type": "boolean", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "form", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise)", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "formEncType", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "formMethod", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "formNoValidate", "type": "boolean", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "formTarget", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "name", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\"", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "value", "type": "string | number | readonly string[]", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null } ] }, { "source": "ButtonPrimitive.Props", "props": [ { "name": "className", "type": "string | ((state: ButtonState) => string)", "required": false, "defaultValue": null, "description": "CSS class applied to the element, or a function that returns a class based on the component's state.", "detail": null, "typeParts": null }, { "name": "render", "type": "ReactElement> | ComponentRenderFn", "required": false, "defaultValue": null, "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.", "detail": null, "typeParts": [ { "text": "ReactElement", "href": "https://react.dev/reference/react/isValidElement" }, { "text": "> | ComponentRenderFn" } ] }, { "name": "size", "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"xl\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null", "required": false, "defaultValue": "default", "description": null, "detail": null, "typeParts": null }, { "name": "style", "type": "CSSProperties | ((state: ButtonState) => CSSProperties)", "required": false, "defaultValue": null, "description": "Style applied to the element, or a function that returns a style object based on the component's state.", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": " | ((state: ButtonState) => " }, { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": ")" } ] }, { "name": "variant", "type": "\"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | \"destructive-solid\" | \"link\" | \"stellar\" | \"glass\" | null", "required": false, "defaultValue": "default", "description": null, "detail": null, "typeParts": null } ] }, { "source": "ButtonProps", "props": [ { "name": "focusableWhenDisabled", "type": "boolean", "required": false, "defaultValue": "false", "description": "Whether the button should be focusable when disabled.", "detail": null, "typeParts": null } ] }, { "source": "NativeButtonProps", "props": [ { "name": "nativeButton", "type": "boolean", "required": false, "defaultValue": "true", "description": "Whether the component renders a native `\n \n …\n", "status": "stable", "useWhen": [ "Content is a discrete object or a grouped interaction." ], "avoidWhen": [ "You are separating sections of prose - use whitespace and a heading." ], "a11y": [ "A plain container with no role. If the card is a section of the page, give it a real heading rather than styled text." ], "related": [], "alternative": [ "metric-card" ] }, "subComponents": [ { "name": "CardHeader", "anchor": "card-header", "summary": "The card's top band: title and description, with a CardAction slot beside them.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "CardTitle", "anchor": "card-title", "summary": "The card's title.", "guidance": [ "A `div` by default, because most cards are not sections of a document. Pass `render={

}` where the card genuinely is one, so the page keeps a heading outline instead of a flat run of styled text." ], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "useRender.ComponentProps<\"div\">" ], "inherited": { "groups": [ { "source": "useRender.ComponentProps<\"div\">", "props": [ { "name": "render", "type": "ReactElement> | ComponentRenderFn", "required": false, "defaultValue": null, "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.", "detail": null, "typeParts": [ { "text": "ReactElement", "href": "https://react.dev/reference/react/isValidElement" }, { "text": "> | ComponentRenderFn" } ] } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "CardDescription", "anchor": "card-description", "summary": "One muted line under the title, saying what the card holds.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "CardAction", "anchor": "card-action", "summary": "The control slot in the header's top-right corner - a menu or one compact action.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "CardContent", "anchor": "card-content", "summary": "The card's body. Bring your own layout; the card only supplies the padding rhythm.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "CardFooter", "anchor": "card-footer", "summary": "The bottom band, for actions or a summarising line.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } } ], "variants": [], "props": [ { "name": "size", "type": "\"default\" | \"sm\"", "required": false, "defaultValue": "default", "description": "sm tightens the interior padding for a card inside a dense layout. The border and radius do not change.", "detail": { "kind": "union", "members": [ "default", "sm" ] }, "typeParts": null }, { "name": "glass", "type": "boolean", "required": false, "defaultValue": "false", "description": "The glass-on-lunar treatment: white-alpha pane, backdrop blur and a 1px top-edge highlight. ONLY on a permanently dark ground - a LunarSurface or the rail. Never on a light surface, where blur reads as smudge. The default dark-theme card stays a plain alpha surface; glass is always opted into.", "detail": null, "typeParts": null } ], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" }, "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "utils" ], "usedBy": [ "board", "chart-card", "metric-card", "pricing-tier", "resource-table", "settings-section" ], "relatedTo": [ "lunar-surface" ], "alternativeFor": [], "oftenUsedWith": [ "avatar", "badge", "board", "button", "gradient-orb", "lunar-surface", "status-badge" ] }, { "name": "cell", "title": "Cell", "layer": "primitive", "description": "Table cell content helpers for Orbit DS - the vocabulary that makes dense rows readable.", "category": "Data display", "importPath": "@orbit/ui/components/cell", "path": "/components/cell", "exports": [ "CellRow", "CellStack", "CellMono", "CellNumeric" ], "status": "stable", "doc": { "summary": "A horizontal cell wrapper for content that pairs a graphic with text - an avatar and a name, an icon and a label.", "guidance": [], "avoid": null, "example": null, "status": "stable", "useWhen": [ "Composing a table cell that needs two lines, an identifier, or aligned digits." ], "avoidWhen": [], "a11y": [ "Layout helpers only. CellNumeric right-aligns and tabularises digits, which helps everyone scanning a column." ], "related": [], "alternative": [] }, "subComponents": [ { "name": "CellStack", "anchor": "cell-stack", "summary": "A two-line cell: a primary value with quiet supporting text beneath. Use for name-over-email or item-over-SKU. Keep the secondary line short - it is metadata, not a description.", "guidance": [], "avoid": null, "example": "\n \n", "props": [ { "name": "primary", "type": "ReactNode", "required": true, "defaultValue": null, "description": "The cell's main line.", "detail": null, "typeParts": [ { "text": "ReactNode", "href": "https://react.dev/learn/typescript#typing-children" } ] }, { "name": "secondary", "type": "ReactNode", "required": false, "defaultValue": null, "description": "The muted line beneath it. Omit when one line says everything.", "detail": null, "typeParts": [ { "text": "ReactNode", "href": "https://react.dev/learn/typescript#typing-children" } ] } ], "variants": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "CellMono", "anchor": "cell-mono", "summary": "An identifier: order ID, SKU, request ID, commit SHA. Mono is reserved for identifiers in Orbit DS - never use it for prose.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"span\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "CellNumeric", "anchor": "cell-numeric", "summary": "A numeric value. Renders tabular numerals so digits align down the column. The containing TableCell and TableHead must both be marked `numeric`.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "React.ComponentProps<\"span\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } } ], "variants": [], "props": [], "inherits": [ "React.ComponentProps<\"div\">" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" }, "dependencies": [], "registryDependencies": [ "utils" ], "usedBy": [], "relatedTo": [], "alternativeFor": [], "oftenUsedWith": [ "badge", "button", "detail-drawer", "property-list", "resource-table", "status-badge", "table" ] }, { "name": "chart", "title": "Chart", "layer": "primitive", "description": "Chart primitives for Orbit DS, wrapping recharts with tokenised grid, axis and tooltip.", "category": "Metrics & charts", "importPath": "@orbit/ui/components/chart", "path": "/components/chart", "exports": [ "ChartContainer", "ChartStyle", "ChartTooltip", "ChartTooltipContent", "ChartLegend", "ChartLegendContent" ], "status": "beta", "doc": { "summary": "Sanctioned recharts primitives.", "guidance": [ "Re-exported so apps never depend on recharts directly - the dependency stays in @orbit/ui, and the surface stays limited to the forms Orbit supports. If you need a form that is not here, that is a design-system decision: add it with a documented rule, do not reach past this module.", "Note the omissions. There is no second Y axis on purpose: a dual-axis chart invites false correlation, and two measures of different scale belong in two charts, small multiples, or indexed to a common base.", "Orbit provides five chart colors. Similar tones need direct labels, shapes or patterns; color alone is not sufficient. Use small multiples or RankedList for crowded comparisons, and provide the same data in a table.", "Every name a chart composes ships from this one module: `AreaChart`, `BarChart`, `LineChart`, `PieChart`, `Area`, `Bar`, `Line`, `Pie`, `Cell`, `CartesianGrid`, `XAxis`, `YAxis` and `ReferenceLine` are all imported from `@orbit/ui/components/chart` alongside `ChartContainer` - none of them from `recharts`, which apps do not depend on." ], "avoid": "Do NOT mint extra hues for a breakdown with more than five categories - fold into \"Other\", use small multiples, or use RankedList, where each bar is labelled in text and the palette cap does not apply.", "example": "import {\n CartesianGrid, ChartContainer, ChartLegend, ChartLegendContent,\n ChartTooltip, ChartTooltipContent, Line, LineChart, XAxis,\n} from \"@orbit/ui/components/chart\"\n\n\n \n \n \n } />\n \n } />\n \n", "status": "beta", "useWhen": [ "You need a chart form ChartCard does not already frame." ], "avoidWhen": [ "A plain number or a Sparkline would answer the question." ], "a11y": [ "The plot is not readable by assistive technology. Every Orbit chart ships a table view alongside it - that is the accessible path.", "A legend is always present for two or more series, so identity is never colour alone." ], "related": [ "ranked-list" ], "alternative": [] }, "subComponents": [ { "name": "ChartStyle", "anchor": "chart-style", "summary": "Emits the per-chart CSS variables that turn config colours into --color-. ChartContainer mounts it for you.", "guidance": [], "avoid": null, "example": null, "props": [ { "name": "id", "type": "string", "required": true, "defaultValue": null, "description": "The chart id the emitted CSS scopes to. ChartContainer passes its own.", "detail": null, "typeParts": null }, { "name": "config", "type": "ChartConfig", "required": true, "defaultValue": null, "description": "The container's config - only entries with a colour or theme emit a variable.", "detail": { "kind": "declaration", "name": "ChartConfig", "code": "export type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n }" }, "typeParts": null } ], "variants": [], "inherits": [], "inherited": { "groups": [], "fromDom": false, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "ChartTooltip", "anchor": "chart-tooltip", "summary": "The recharts Tooltip, re-exported so apps never import recharts directly. Pass ChartTooltipContent as its content.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "RechartsPrimitive.Tooltip.Props" ], "inherited": { "groups": [], "fromDom": false } }, { "name": "ChartTooltipContent", "anchor": "chart-tooltip-content", "summary": "The Orbit-styled tooltip body: config labels, a swatch per series, and text in ink rather than the series colour.", "guidance": [], "avoid": null, "example": null, "props": [ { "name": "hideLabel", "type": "boolean", "required": false, "defaultValue": "false", "description": "Drop the header line naming the hovered point.", "detail": null, "typeParts": null }, { "name": "hideIndicator", "type": "boolean", "required": false, "defaultValue": "false", "description": "Drop the per-series swatch.", "detail": null, "typeParts": null }, { "name": "indicator", "type": "\"line\" | \"dot\" | \"dashed\"", "required": false, "defaultValue": "dot", "description": "The swatch shape beside each series.", "detail": { "kind": "union", "members": [ "line", "dot", "dashed" ] }, "typeParts": null }, { "name": "nameKey", "type": "string", "required": false, "defaultValue": null, "description": "Config key to name series by, when it is not the dataKey.", "detail": null, "typeParts": null }, { "name": "labelKey", "type": "string", "required": false, "defaultValue": null, "description": "Config key for the header label, when it is not the dataKey.", "detail": null, "typeParts": null } ], "variants": [], "inherits": [ "React.ComponentProps", "React.ComponentProps<\"div\">", "RechartsPrimitive.DefaultTooltipContentProps" ], "inherited": { "groups": [ { "source": "React.ComponentProps", "props": [ { "name": "active", "type": "boolean", "required": false, "defaultValue": null, "description": "If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. If false, then Tooltip is never displayed. If undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.", "detail": null, "typeParts": null }, { "name": "allowEscapeViewBox", "type": "AllowInDimension", "required": false, "defaultValue": null, "description": "This option allows the tooltip to extend beyond the viewBox of the chart itself. @defaultValue {\"x\":false,\"y\":false}", "detail": null, "typeParts": null }, { "name": "animationDuration", "type": "number", "required": false, "defaultValue": null, "description": "Specifies the duration of animation, the unit of this option is ms. @defaultValue 400", "detail": null, "typeParts": null }, { "name": "animationEasing", "type": "AnimationTiming", "required": false, "defaultValue": null, "description": "The type of easing function. @defaultValue ease", "detail": null, "typeParts": null }, { "name": "axisId", "type": "AxisId", "required": false, "defaultValue": null, "description": "Tooltip always attaches itself to the \"Tooltip\" axis. Which axis is it? Depends on the layout: - horizontal layout -> X axis - vertical layout -> Y axis - radial layout -> radial axis - centric layout -> angle axis Tooltip will use the default axis for the layout, unless you specify an axisId. @defaultValue 0", "detail": null, "typeParts": null }, { "name": "content", "type": "(ContentType & string)", "required": false, "defaultValue": null, "description": "Renders the content of the tooltip. This should return HTML elements, not SVG elements. - If not set, the {@link DefaultTooltipContent } component is used. - If set to a React element, this element will be cloned and extra props will be passed in. - If set to a function, the function will be called and should return HTML elements. @see {@link https://recharts.github.io/en-US/examples/CustomContentOfTooltip/ Example with custom content}", "detail": null, "typeParts": null }, { "name": "cursor", "type": "CursorDefinition", "required": false, "defaultValue": null, "description": "If set false, no cursor will be drawn when tooltip is active. If set a object, the option is the configuration of cursor. If set a React element, the option is the custom react element of drawing cursor. @defaultValue true", "detail": null, "typeParts": null }, { "name": "defaultIndex", "type": "number | TooltipIndex", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "filterNull", "type": "boolean", "required": false, "defaultValue": null, "description": "When an item of the payload has value null or undefined, this item won't be displayed. @defaultValue true", "detail": null, "typeParts": null }, { "name": "includeHidden", "type": "boolean", "required": false, "defaultValue": null, "description": "If true, the tooltip will display information about hidden series. Defaults to false. Interacting with the hide property of Area, Bar, Line, Scatter. @defaultValue false", "detail": null, "typeParts": null }, { "name": "isAnimationActive", "type": "boolean | \"auto\"", "required": false, "defaultValue": null, "description": "If set false, animation of tooltip will be disabled. If set \"auto\", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility. @defaultValue auto", "detail": null, "typeParts": null }, { "name": "offset", "type": "number | Coordinate", "required": false, "defaultValue": null, "description": "The offset size between the position of tooltip and the mouse cursor position. When a number is provided, the same offset is applied to both x and y axes. When a Coordinate object is provided, you can specify different offsets for each axis (x and y as numbers) @defaultValue 10", "detail": null, "typeParts": null }, { "name": "payloadUniqBy", "type": "UniqueOption", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "portal", "type": "HTMLElement | null", "required": false, "defaultValue": null, "description": "If portal is defined, then Tooltip will use this element as a target for rendering using React Portal: https://react.dev/reference/react-dom/createPortal If this is undefined then Tooltip renders inside the recharts-wrapper element.", "detail": null, "typeParts": null }, { "name": "position", "type": "Partial", "required": false, "defaultValue": null, "description": "If this field is set, the tooltip will be displayed at the specified position regardless of the mouse position. You can set a single field (x or y) and let the other field be calculated automatically based on the mouse position.", "detail": null, "typeParts": null }, { "name": "reverseDirection", "type": "AllowInDimension", "required": false, "defaultValue": null, "description": "@defaultValue {\"x\":false,\"y\":false}", "detail": null, "typeParts": null }, { "name": "shared", "type": "boolean", "required": false, "defaultValue": null, "description": "Defines whether the tooltip is reacting to the current data point, or to all data points at the current axis coordinate. - `true`: tooltip will appear on top of all bars on an axis tick. - `false`: tooltip will appear on individual bars. Different chart types allow different modes, and have different defaults. @see {@link https://github.com/recharts/recharts/wiki/Tooltip-event-type-and-shared-prop Tooltip event type and shared prop wiki page}", "detail": null, "typeParts": null }, { "name": "trigger", "type": "TooltipTrigger", "required": false, "defaultValue": null, "description": "If `hover` then the Tooltip shows on mouse enter and hides on mouse leave. If `click` then the Tooltip shows after clicking and stays active. @defaultValue hover", "detail": null, "typeParts": null }, { "name": "useTranslate3d", "type": "boolean", "required": false, "defaultValue": null, "description": "@defaultValue false", "detail": null, "typeParts": null }, { "name": "wrapperStyle", "type": "CSSProperties", "required": false, "defaultValue": null, "description": "CSS styles to be applied to the wrapper `div` element.", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" } ] } ] }, { "source": "RechartsPrimitive.DefaultTooltipContentProps", "props": [ { "name": "contentStyle", "type": "CSSProperties", "required": false, "defaultValue": null, "description": "The style of tooltip content which is a dom element. @defaultValue {}", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" } ] }, { "name": "formatter", "type": "Formatter | ((value: ValueType, name: NameType, item: TooltipPayloadEntry, index: number, payload: TooltipPayload) => ReactNode | [...])", "required": false, "defaultValue": null, "description": "Function to customize the value in the tooltip. If you return an array, the first entry will be the formatted \"value\", and the second entry will be the formatted \"name\"", "detail": null, "typeParts": [ { "text": "Formatter | ((value: ValueType, name: NameType, item: TooltipPayloadEntry, index: number, payload: TooltipPayload) => " }, { "text": "ReactNode", "href": "https://react.dev/learn/typescript#typing-children" }, { "text": " | [...])" } ] }, { "name": "itemSorter", "type": "\"dataKey\" | \"value\" | \"name\" | ((item: Payload) => string | number)", "required": false, "defaultValue": null, "description": "Sorts tooltip items. Defaults to 'name' which means it sorts alphabetically by graphical item `name` property. @defaultValue name", "detail": null, "typeParts": null }, { "name": "itemStyle", "type": "CSSProperties", "required": false, "defaultValue": null, "description": "The style of default tooltip content item which is a li element. @defaultValue {}", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" } ] }, { "name": "label", "type": "ReactNode", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "ReactNode", "href": "https://react.dev/learn/typescript#typing-children" } ] }, { "name": "labelClassName", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "labelFormatter", "type": "((label: ReactNode, payload: readonly Payload[]) => ReactNode) | ((label: any, payload: TooltipPayload) => ReactNode)", "required": false, "defaultValue": null, "description": "The formatter function of label in tooltip.", "detail": null, "typeParts": [ { "text": "((label: " }, { "text": "ReactNode", "href": "https://react.dev/learn/typescript#typing-children" }, { "text": ", payload: readonly Payload[]) => " }, { "text": "ReactNode", "href": "https://react.dev/learn/typescript#typing-children" }, { "text": ") | ((label: any, payload: TooltipPayload) => " }, { "text": "ReactNode", "href": "https://react.dev/learn/typescript#typing-children" }, { "text": ")" } ] }, { "name": "labelStyle", "type": "CSSProperties", "required": false, "defaultValue": null, "description": "The style of default tooltip label which is a p element. @defaultValue {}", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" } ] }, { "name": "payload", "type": "readonly Payload[]", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "separator", "type": "string", "required": false, "defaultValue": null, "description": "The separator between name and value. @defaultValue ' : '", "detail": null, "typeParts": null }, { "name": "wrapperClassName", "type": "string", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "ChartLegend", "anchor": "chart-legend", "summary": "The recharts Legend, re-exported so apps never import recharts directly. Pass ChartLegendContent as its content.", "guidance": [], "avoid": null, "example": null, "props": [], "variants": [], "inherits": [ "RechartsPrimitive.Legend.Props" ], "inherited": { "groups": [ { "source": "RechartsPrimitive.Legend.Props", "props": [ { "name": "content", "type": "ContentType", "required": false, "defaultValue": null, "description": "Renders the content of the legend. This should return HTML elements, not SVG elements. - If not set, the {@link DefaultLegendContent } component is used. - If set to a React element, this element will be cloned and extra props will be passed in. - If set to a function, the function will be called and should return HTML elements. @example @example ", "detail": null, "typeParts": null }, { "name": "dangerouslySetInnerHTML", "type": "{ __html: string; }", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "itemSorter", "type": "LegendItemSorter | null", "required": false, "defaultValue": null, "description": "Sorts Legend items. Defaults to `value` which means it will sort alphabetically by the label. If `null` is provided then the payload is not sorted. Be aware that without sort, the order of items may change between renders! @defaultValue value", "detail": null, "typeParts": null }, { "name": "onAbort", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onAbortCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onAnimationEnd", "type": "AdaptChildAnimationEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildAnimationEventHandler>>" } ] }, { "name": "onAnimationEndCapture", "type": "AdaptChildAnimationEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildAnimationEventHandler>>" } ] }, { "name": "onAnimationIteration", "type": "AdaptChildAnimationEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildAnimationEventHandler>>" } ] }, { "name": "onAnimationIterationCapture", "type": "AdaptChildAnimationEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildAnimationEventHandler>>" } ] }, { "name": "onAnimationStart", "type": "AdaptChildAnimationEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildAnimationEventHandler>>" } ] }, { "name": "onAnimationStartCapture", "type": "AdaptChildAnimationEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildAnimationEventHandler>>" } ] }, { "name": "onAuxClick", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onAuxClickCapture", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onBBoxUpdate", "type": "((box: ElementOffset | null) => void)", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "onBeforeInput", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onBeforeInputCapture", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onBlur", "type": "AdaptChildFocusEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFocusEventHandler>>" } ] }, { "name": "onBlurCapture", "type": "AdaptChildFocusEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFocusEventHandler>>" } ] }, { "name": "onCanPlay", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onCanPlayCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onCanPlayThrough", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onCanPlayThroughCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onChange", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onChangeCapture", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onClickCapture", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onCompositionEnd", "type": "AdaptChildCompositionEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildCompositionEventHandler>>" } ] }, { "name": "onCompositionEndCapture", "type": "AdaptChildCompositionEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildCompositionEventHandler>>" } ] }, { "name": "onCompositionStart", "type": "AdaptChildCompositionEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildCompositionEventHandler>>" } ] }, { "name": "onCompositionStartCapture", "type": "AdaptChildCompositionEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildCompositionEventHandler>>" } ] }, { "name": "onCompositionUpdate", "type": "AdaptChildCompositionEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildCompositionEventHandler>>" } ] }, { "name": "onCompositionUpdateCapture", "type": "AdaptChildCompositionEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildCompositionEventHandler>>" } ] }, { "name": "onContextMenu", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onContextMenuCapture", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onCopy", "type": "AdaptChildClipboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildClipboardEventHandler>>" } ] }, { "name": "onCopyCapture", "type": "AdaptChildClipboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildClipboardEventHandler>>" } ] }, { "name": "onCut", "type": "AdaptChildClipboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildClipboardEventHandler>>" } ] }, { "name": "onCutCapture", "type": "AdaptChildClipboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildClipboardEventHandler>>" } ] }, { "name": "onDoubleClick", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onDoubleClickCapture", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onDrag", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragCapture", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragEnd", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragEndCapture", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragEnter", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragEnterCapture", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragExit", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragExitCapture", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragLeave", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragLeaveCapture", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragOver", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragOverCapture", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragStart", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDragStartCapture", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDrop", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDropCapture", "type": "AdaptChildDragEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildDragEventHandler>>" } ] }, { "name": "onDurationChange", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onDurationChangeCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onEmptied", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onEmptiedCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onEncrypted", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onEncryptedCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onEnded", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onEndedCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onError", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onErrorCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onFocus", "type": "AdaptChildFocusEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFocusEventHandler>>" } ] }, { "name": "onFocusCapture", "type": "AdaptChildFocusEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFocusEventHandler>>" } ] }, { "name": "onGotPointerCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onGotPointerCaptureCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onInput", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onInputCapture", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onInvalid", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onInvalidCapture", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onKeyDown", "type": "AdaptChildKeyboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildKeyboardEventHandler>>" } ] }, { "name": "onKeyDownCapture", "type": "AdaptChildKeyboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildKeyboardEventHandler>>" } ] }, { "name": "onKeyPress", "type": "AdaptChildKeyboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildKeyboardEventHandler>>" } ] }, { "name": "onKeyPressCapture", "type": "AdaptChildKeyboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildKeyboardEventHandler>>" } ] }, { "name": "onKeyUp", "type": "AdaptChildKeyboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildKeyboardEventHandler>>" } ] }, { "name": "onKeyUpCapture", "type": "AdaptChildKeyboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildKeyboardEventHandler>>" } ] }, { "name": "onLoad", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onLoadCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onLoadedData", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onLoadedDataCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onLoadedMetadata", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onLoadedMetadataCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onLoadStart", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onLoadStartCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onLostPointerCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onLostPointerCaptureCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onMouseDown", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onMouseDownCapture", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onMouseMove", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onMouseMoveCapture", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onMouseOut", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onMouseOutCapture", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onMouseOver", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onMouseOverCapture", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onMouseUp", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onMouseUpCapture", "type": "AdaptChildMouseEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildMouseEventHandler>>" } ] }, { "name": "onPaste", "type": "AdaptChildClipboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildClipboardEventHandler>>" } ] }, { "name": "onPasteCapture", "type": "AdaptChildClipboardEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildClipboardEventHandler>>" } ] }, { "name": "onPause", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onPauseCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onPlay", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onPlayCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onPlaying", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onPlayingCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onPointerCancel", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerCancelCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerDown", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerDownCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerEnter", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerEnterCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerLeave", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerLeaveCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerMove", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerMoveCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerOut", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerOutCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerOver", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerOverCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerUp", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerUpCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onProgress", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onProgressCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onRateChange", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onRateChangeCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onReset", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onResetCapture", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onScroll", "type": "AdaptChildUIEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildUIEventHandler>>" } ] }, { "name": "onScrollCapture", "type": "AdaptChildUIEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildUIEventHandler>>" } ] }, { "name": "onSeeked", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onSeekedCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onSeeking", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onSeekingCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onSelect", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onSelectCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onStalled", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onStalledCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onSubmit", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onSubmitCapture", "type": "AdaptChildFormEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildFormEventHandler>>" } ] }, { "name": "onSuspend", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onSuspendCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onTimeUpdate", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onTimeUpdateCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onTouchCancel", "type": "AdaptChildTouchEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTouchEventHandler>>" } ] }, { "name": "onTouchCancelCapture", "type": "AdaptChildTouchEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTouchEventHandler>>" } ] }, { "name": "onTouchEnd", "type": "AdaptChildTouchEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTouchEventHandler>>" } ] }, { "name": "onTouchEndCapture", "type": "AdaptChildTouchEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTouchEventHandler>>" } ] }, { "name": "onTouchMove", "type": "AdaptChildTouchEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTouchEventHandler>>" } ] }, { "name": "onTouchMoveCapture", "type": "AdaptChildTouchEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTouchEventHandler>>" } ] }, { "name": "onTouchStart", "type": "AdaptChildTouchEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTouchEventHandler>>" } ] }, { "name": "onTouchStartCapture", "type": "AdaptChildTouchEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTouchEventHandler>>" } ] }, { "name": "onTransitionEnd", "type": "AdaptChildTransitionEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTransitionEventHandler>>" } ] }, { "name": "onTransitionEndCapture", "type": "AdaptChildTransitionEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildTransitionEventHandler>>" } ] }, { "name": "onVolumeChange", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onVolumeChangeCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onWaiting", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onWaitingCapture", "type": "AdaptChildReactEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildReactEventHandler>>" } ] }, { "name": "onWheel", "type": "AdaptChildWheelEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildWheelEventHandler>>" } ] }, { "name": "onWheelCapture", "type": "AdaptChildWheelEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildWheelEventHandler>>" } ] }, { "name": "payloadUniqBy", "type": "UniqueOption", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": null }, { "name": "portal", "type": "HTMLElement | null", "required": false, "defaultValue": null, "description": "If portal is defined, then Legend will use this element as a target for rendering using React Portal. If this is undefined then Legend renders inside the recharts-wrapper element. @see {@link https://react.dev/reference/react-dom/createPortal}", "detail": null, "typeParts": null }, { "name": "verticalAlign", "type": "VerticalAlignmentType", "required": false, "defaultValue": null, "description": "The alignment of the whole Legend container: - `bottom`: shows the Legend below chart, and chart height reduces automatically to make space for it. - `top`: shows the Legend above chart, and chart height reduces automatically. - `middle`: shows the Legend in the middle of chart, covering other content, and chart height remains unchanged. The exact behavior changes depending on `align` prop. @defaultValue bottom", "detail": null, "typeParts": null }, { "name": "wrapperStyle", "type": "CSSProperties", "required": false, "defaultValue": null, "description": "CSS styles to be applied to the wrapper `div` element.", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" } ] } ] }, { "source": "DefaultLegendContentProps", "props": [ { "name": "align", "type": "HorizontalAlignmentType", "required": false, "defaultValue": null, "description": "Horizontal alignment of the whole Legend container: - `left`: shows the Legend to the left of the chart, and chart width reduces automatically to make space for it. - `right` shows the Legend to the right of the chart, and chart width reduces automatically. - `center` shows the Legend in the middle of chart, and chart width remains unchanged. The exact behavior changes depending on 'verticalAlign' prop. @defaultValue center", "detail": null, "typeParts": null }, { "name": "formatter", "type": "Formatter", "required": false, "defaultValue": null, "description": "Function to customize how content is serialized before rendering. This should return HTML elements, or strings. @example (value, entry, index) => {value} @example https://codesandbox.io/s/legend-formatter-rmzp9", "detail": null, "typeParts": null }, { "name": "iconSize", "type": "number", "required": false, "defaultValue": null, "description": "The size of icon in each legend item. @defaultValue 14", "detail": null, "typeParts": null }, { "name": "iconType", "type": "LegendType", "required": false, "defaultValue": null, "description": "The type of icon in each legend item.", "detail": null, "typeParts": null }, { "name": "inactiveColor", "type": "string", "required": false, "defaultValue": null, "description": "The color of the icon when the item is inactive. @defaultValue #ccc", "detail": null, "typeParts": null }, { "name": "labelStyle", "type": "CSSProperties", "required": false, "defaultValue": null, "description": "The style of each text label which is a span element. @defaultValue {}", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" } ] }, { "name": "layout", "type": "CartesianLayout", "required": false, "defaultValue": null, "description": "The layout of legend items inside the legend container. @defaultValue horizontal", "detail": null, "typeParts": null }, { "name": "onClick", "type": "((data: LegendPayload, index: number, event: MouseEvent) => void)", "required": false, "defaultValue": null, "description": "The customized event handler of click on the items in this group", "detail": null, "typeParts": null }, { "name": "onMouseEnter", "type": "((data: LegendPayload, index: number, event: MouseEvent) => void)", "required": false, "defaultValue": null, "description": "The customized event handler of mouseenter on the items in this group @example https://recharts.github.io/examples/LegendEffectOpacity", "detail": null, "typeParts": null }, { "name": "onMouseLeave", "type": "((data: LegendPayload, index: number, event: MouseEvent) => void)", "required": false, "defaultValue": null, "description": "The customized event handler of mouseleave on the items in this group @example https://recharts.github.io/examples/LegendEffectOpacity", "detail": null, "typeParts": null } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } }, { "name": "ChartLegendContent", "anchor": "chart-legend-content", "summary": "The Orbit-styled legend body. Required for two or more series, so identity is never colour alone.", "guidance": [], "avoid": null, "example": null, "props": [ { "name": "hideIcon", "type": "boolean", "required": false, "defaultValue": "false", "description": "Drop the per-series swatch.", "detail": null, "typeParts": null }, { "name": "nameKey", "type": "string", "required": false, "defaultValue": null, "description": "Config key to name series by, when it is not the dataKey.", "detail": null, "typeParts": null } ], "variants": [], "inherits": [ "React.ComponentProps<\"div\">", "RechartsPrimitive.DefaultLegendContentProps" ], "inherited": { "groups": [ { "source": "DefaultLegendContentProps", "props": [ { "name": "align", "type": "HorizontalAlignmentType", "required": false, "defaultValue": null, "description": "Horizontal alignment of the whole Legend container: - `left`: shows the Legend to the left of the chart, and chart width reduces automatically to make space for it. - `right` shows the Legend to the right of the chart, and chart width reduces automatically. - `center` shows the Legend in the middle of chart, and chart width remains unchanged. The exact behavior changes depending on 'verticalAlign' prop. @defaultValue center", "detail": null, "typeParts": null }, { "name": "formatter", "type": "Formatter", "required": false, "defaultValue": null, "description": "Function to customize how content is serialized before rendering. This should return HTML elements, or strings. @example (value, entry, index) => {value} @example https://codesandbox.io/s/legend-formatter-rmzp9", "detail": null, "typeParts": null }, { "name": "iconSize", "type": "number", "required": false, "defaultValue": null, "description": "The size of icon in each legend item. @defaultValue 14", "detail": null, "typeParts": null }, { "name": "iconType", "type": "LegendType", "required": false, "defaultValue": null, "description": "The type of icon in each legend item.", "detail": null, "typeParts": null }, { "name": "inactiveColor", "type": "string", "required": false, "defaultValue": null, "description": "The color of the icon when the item is inactive. @defaultValue #ccc", "detail": null, "typeParts": null }, { "name": "labelStyle", "type": "CSSProperties", "required": false, "defaultValue": null, "description": "The style of each text label which is a span element. @defaultValue {}", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" } ] }, { "name": "layout", "type": "CartesianLayout", "required": false, "defaultValue": null, "description": "The layout of legend items inside the legend container. @defaultValue horizontal", "detail": null, "typeParts": null }, { "name": "payload", "type": "readonly LegendPayload[]", "required": false, "defaultValue": null, "description": "DefaultLegendContent.payload is omitted from Legend props. A custom payload can be passed here if desired, or it can be passed from the Legend \"content\" callback.", "detail": null, "typeParts": null }, { "name": "verticalAlign", "type": "VerticalAlignmentType", "required": false, "defaultValue": "bottom", "description": "Vertical alignment of the whole Legend container: - `bottom`: shows the Legend below chart, and chart height reduces automatically to make space for it. - `top`: shows the Legend above chart, and chart height reduces automatically. - `middle`: shows the Legend in the middle of chart, covering other content, and chart height remains unchanged. The exact behavior changes depending on `align` prop. @defaultValue middle", "detail": null, "typeParts": null } ] }, { "source": "React.ComponentProps<\"div\">", "props": [ { "name": "onPointerEnterCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] }, { "name": "onPointerLeaveCapture", "type": "AdaptChildPointerEventHandler>>", "required": false, "defaultValue": null, "description": null, "detail": null, "typeParts": [ { "text": "AdaptChildPointerEventHandler>>" } ] } ] } ], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" } } ], "variants": [], "props": [ { "name": "config", "type": "ChartConfig", "required": true, "defaultValue": null, "description": "Maps each data key to its label and colour. The colour must be a chart token; status hues are reserved and must never become a series.", "detail": { "kind": "declaration", "name": "ChartConfig", "code": "export type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n }" }, "typeParts": null }, { "name": "initialDimension", "type": "{ width: number; height: number; }", "required": false, "defaultValue": "{ width: 320, height: 200 } as const", "description": "Size used for the first paint, before the container is measured. Prevents a zero-height flash.", "detail": null, "typeParts": null } ], "inherits": [ "React.ComponentProps<\"div\">", "React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >" ], "inherited": { "groups": [], "fromDom": true, "domReference": "https://react.dev/reference/react-dom/components/common" }, "dependencies": [ "recharts" ], "registryDependencies": [ "chart", "utils" ], "usedBy": [ "chart" ], "relatedTo": [ "chart-card", "ranked-list", "sparkline" ], "alternativeFor": [], "oftenUsedWith": [ "chart-card", "segmented-control", "table" ] }, { "name": "checkbox", "title": "Checkbox", "layer": "primitive", "description": "Checkbox primitive for Orbit DS, built on Base UI.", "category": "Forms", "importPath": "@orbit/ui/components/checkbox", "path": "/components/checkbox", "exports": [ "Checkbox" ], "status": "stable", "doc": { "summary": "An independent on/off choice, or one of several selections.", "guidance": [ "Supports `indeterminate`, which is what a table's select-all uses to show a partial selection rather than lying with a tick.", "Use a Checkbox for something the user submits, and `Switch` for something that applies immediately. A standalone checkbox still needs a label or `aria-label`." ], "avoid": null, "example": "", "status": "stable", "useWhen": [ "Zero or more of several options can be true, or a value takes effect on save." ], "avoidWhen": [ "Exactly one option must be chosen - that is RadioGroup." ], "a11y": [ "Needs a real label or an aria-label; the box is not its name.", "indeterminate is a third state announced as \"mixed\", which an unchecked box would misreport." ], "related": [], "alternative": [] }, "subComponents": [], "variants": [], "props": [], "inherits": [ "CheckboxPrimitive.Root.Props" ], "inherited": { "groups": [ { "source": "CheckboxRootProps", "props": [ { "name": "checked", "type": "boolean", "required": false, "defaultValue": null, "description": "Whether the checkbox is currently ticked. To render an uncontrolled checkbox, use the `defaultChecked` prop instead.", "detail": null, "typeParts": null }, { "name": "defaultChecked", "type": "boolean", "required": false, "defaultValue": "false", "description": "Whether the checkbox is initially ticked. To render a controlled checkbox, use the `checked` prop instead.", "detail": null, "typeParts": null }, { "name": "disabled", "type": "boolean", "required": false, "defaultValue": "false", "description": "Whether the component should ignore user interaction.", "detail": null, "typeParts": null }, { "name": "form", "type": "string", "required": false, "defaultValue": null, "description": "Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form.", "detail": null, "typeParts": null }, { "name": "id", "type": "string", "required": false, "defaultValue": null, "description": "The id of the input element.", "detail": null, "typeParts": null }, { "name": "indeterminate", "type": "boolean", "required": false, "defaultValue": "false", "description": "Whether the checkbox is in a mixed state: neither ticked, nor unticked.", "detail": null, "typeParts": null }, { "name": "inputRef", "type": "Ref", "required": false, "defaultValue": null, "description": "A ref to access the hidden `` element.", "detail": null, "typeParts": [ { "text": "Ref", "href": "https://react.dev/reference/react/useRef" }, { "text": "" } ] }, { "name": "name", "type": "string", "required": false, "defaultValue": null, "description": "Identifies the field when a form is submitted.", "detail": null, "typeParts": null }, { "name": "onCheckedChange", "type": "((checked: boolean, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)", "required": false, "defaultValue": null, "description": "Event handler called when the checkbox is ticked or unticked.", "detail": null, "typeParts": null }, { "name": "parent", "type": "boolean", "required": false, "defaultValue": "false", "description": "Whether the checkbox controls a group of child checkboxes. Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).", "detail": null, "typeParts": null }, { "name": "readOnly", "type": "boolean", "required": false, "defaultValue": "false", "description": "Whether the user should be unable to tick or untick the checkbox.", "detail": null, "typeParts": null }, { "name": "required", "type": "boolean", "required": false, "defaultValue": "false", "description": "Whether the user must tick the checkbox before submitting a form.", "detail": null, "typeParts": null }, { "name": "uncheckedValue", "type": "string", "required": false, "defaultValue": null, "description": "The value submitted with the form when the checkbox is unchecked. By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.", "detail": null, "typeParts": null }, { "name": "value", "type": "string", "required": false, "defaultValue": null, "description": "The checkbox's value. Identifies it within a [Checkbox Group](https://base-ui.com/react/components/checkbox-group), falling back to `name` when omitted. When submitting a form, a checked box submits `value`; with no `value`, it submits the native \"on\".", "detail": null, "typeParts": null } ] }, { "source": "CheckboxPrimitive.Root.Props", "props": [ { "name": "className", "type": "string | ((state: CheckboxRootState) => string)", "required": false, "defaultValue": null, "description": "CSS class applied to the element, or a function that returns a class based on the component's state.", "detail": null, "typeParts": null }, { "name": "render", "type": "ReactElement> | ComponentRenderFn", "required": false, "defaultValue": null, "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.", "detail": null, "typeParts": [ { "text": "ReactElement", "href": "https://react.dev/reference/react/isValidElement" }, { "text": "> | ComponentRenderFn" } ] }, { "name": "style", "type": "CSSProperties | ((state: CheckboxRootState) => CSSProperties)", "required": false, "defaultValue": null, "description": "Style applied to the element, or a function that returns a style object based on the component's state.", "detail": null, "typeParts": [ { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": " | ((state: CheckboxRootState) => " }, { "text": "CSSProperties", "href": "https://react.dev/learn/typescript#typing-style-props" }, { "text": ")" } ] } ] }, { "source": "NonNativeButtonProps", "props": [ { "name": "nativeButton", "type": "boolean", "required": false, "defaultValue": "false", "description": "Whether the component renders a native `