componentDefinitions

Home > @backstage/ui > componentDefinitions

Component definitions for the Backstage UI library

Signature:

componentDefinitions: {
    readonly Avatar: {
        readonly classNames: {
            readonly root: "bui-AvatarRoot";
            readonly image: "bui-AvatarImage";
            readonly fallback: "bui-AvatarFallback";
        };
        readonly dataAttributes: {
            readonly size: readonly ["small", "medium", "large"];
        };
    };
    readonly Box: {
        readonly classNames: {
            readonly root: "bui-Box";
        };
    };
    readonly Button: {
        readonly classNames: {
            readonly root: "bui-Button";
        };
        readonly dataAttributes: {
            readonly size: readonly ["small", "medium", "large"];
            readonly variant: readonly ["primary", "secondary", "ghost"];
        };
    };
    readonly ButtonIcon: {
        readonly classNames: {
            readonly root: "bui-ButtonIcon";
        };
    };
    readonly ButtonLink: {
        readonly classNames: {
            readonly root: "bui-ButtonLink";
        };
    };
    readonly Card: {
        readonly classNames: {
            readonly root: "bui-Card";
            readonly header: "bui-CardHeader";
            readonly body: "bui-CardBody";
            readonly footer: "bui-CardFooter";
        };
    };
    readonly Checkbox: {
        readonly classNames: {
            readonly root: "bui-CheckboxRoot";
            readonly label: "bui-CheckboxLabel";
            readonly indicator: "bui-CheckboxIndicator";
        };
        readonly dataAttributes: {
            readonly checked: readonly [true, false];
        };
    };
    readonly Collapsible: {
        readonly classNames: {
            readonly root: "bui-CollapsibleRoot";
            readonly trigger: "bui-CollapsibleTrigger";
            readonly panel: "bui-CollapsiblePanel";
        };
    };
    readonly Container: {
        readonly classNames: {
            readonly root: "bui-Container";
        };
    };
    readonly FieldLabel: {
        readonly classNames: {
            readonly root: "bui-FieldLabelWrapper";
            readonly label: "bui-FieldLabel";
            readonly secondaryLabel: "bui-FieldSecondaryLabel";
            readonly description: "bui-FieldDescription";
        };
    };
    readonly Flex: {
        readonly classNames: {
            readonly root: "bui-Flex";
        };
    };
    readonly Grid: {
        readonly classNames: {
            readonly root: "bui-Grid";
            readonly item: "bui-GridItem";
        };
    };
    readonly Header: {
        readonly classNames: {
            readonly toolbar: "bui-HeaderToolbar";
            readonly toolbarWrapper: "bui-HeaderToolbarWrapper";
            readonly toolbarContent: "bui-HeaderToolbarContent";
            readonly toolbarControls: "bui-HeaderToolbarControls";
            readonly toolbarIcon: "bui-HeaderToolbarIcon";
            readonly toolbarName: "bui-HeaderToolbarName";
            readonly breadcrumbs: "bui-HeaderBreadcrumbs";
            readonly breadcrumb: "bui-HeaderBreadcrumb";
            readonly breadcrumbLink: "bui-HeaderBreadcrumbLink";
            readonly breadcrumbSeparator: "bui-HeaderBreadcrumbSeparator";
            readonly tabsWrapper: "bui-HeaderTabsWrapper";
        };
    };
    readonly HeaderPage: {
        readonly classNames: {
            readonly root: "bui-HeaderPage";
            readonly content: "bui-HeaderPageContent";
            readonly tabsWrapper: "bui-HeaderPageTabsWrapper";
            readonly controls: "bui-HeaderPageControls";
        };
    };
    readonly Heading: {
        readonly classNames: {
            readonly root: "bui-Heading";
        };
        readonly dataAttributes: {
            readonly variant: readonly ["title1", "title2", "title3", "subtitle"];
            readonly color: readonly ["primary", "secondary", "muted"];
            readonly truncate: readonly [true, false];
        };
    };
    readonly Icon: {
        readonly classNames: {
            readonly root: "bui-Icon";
        };
    };
    readonly Link: {
        readonly classNames: {
            readonly root: "bui-Link";
        };
        readonly dataAttributes: {
            readonly variant: readonly ["subtitle", "body", "caption", "label"];
            readonly weight: readonly ["regular", "bold"];
        };
    };
    readonly List: {
        readonly classNames: {
            readonly root: "bui-List";
            readonly row: "bui-ListRow";
            readonly label: "bui-ListLabel";
        };
    };
    readonly Menu: {
        readonly classNames: {
            readonly trigger: "bui-MenuTrigger";
            readonly backdrop: "bui-MenuBackdrop";
            readonly positioner: "bui-MenuPositioner";
            readonly popup: "bui-MenuPopup";
            readonly arrow: "bui-MenuArrow";
            readonly item: "bui-MenuItem";
            readonly group: "bui-MenuGroup";
            readonly groupLabel: "bui-MenuGroupLabel";
            readonly radioGroup: "bui-MenuRadioGroup";
            readonly radioItem: "bui-MenuRadioItem";
            readonly radioItemIndicator: "bui-MenuRadioItemIndicator";
            readonly checkboxItem: "bui-MenuCheckboxItem";
            readonly checkboxItemIndicator: "bui-MenuCheckboxItemIndicator";
            readonly submenuTrigger: "bui-MenuSubmenuTrigger";
            readonly separator: "bui-MenuSeparator";
        };
    };
    readonly Popover: {
        readonly classNames: {
            readonly root: "bui-Popover";
        };
    };
    readonly RadioGroup: {
        readonly classNames: {
            readonly root: "bui-RadioGroup";
            readonly content: "bui-RadioGroupContent";
            readonly radio: "bui-Radio";
        };
    };
    readonly ScrollArea: {
        readonly classNames: {
            readonly root: "bui-ScrollAreaRoot";
            readonly viewport: "bui-ScrollAreaViewport";
            readonly scrollbar: "bui-ScrollAreaScrollbar";
            readonly thumb: "bui-ScrollAreaThumb";
        };
    };
    readonly SearchField: {
        readonly classNames: {
            readonly root: "bui-SearchField";
            readonly clear: "bui-InputClear";
        };
    };
    readonly Select: {
        readonly classNames: {
            readonly root: "bui-Select";
            readonly trigger: "bui-SelectTrigger";
            readonly value: "bui-SelectValue";
            readonly icon: "bui-SelectIcon";
            readonly list: "bui-SelectList";
            readonly item: "bui-SelectItem";
            readonly itemIndicator: "bui-SelectItemIndicator";
            readonly itemLabel: "bui-SelectItemLabel";
        };
        readonly dataAttributes: {
            readonly size: readonly ["small", "medium"];
        };
    };
    readonly Skeleton: {
        readonly classNames: {
            readonly root: "bui-Skeleton";
        };
    };
    readonly Switch: {
        readonly classNames: {
            readonly root: "bui-Switch";
            readonly indicator: "bui-SwitchIndicator";
        };
    };
    readonly Table: {
        readonly classNames: {
            readonly root: "bui-TableRoot";
            readonly header: "bui-TableHeader";
            readonly body: "bui-TableBody";
            readonly row: "bui-TableRow";
            readonly head: "bui-TableHead";
            readonly caption: "bui-TableCaption";
            readonly cell: "bui-TableCell";
            readonly cellText: "bui-TableCellText";
            readonly cellLink: "bui-TableCellLink";
            readonly cellProfile: "bui-TableCellProfile";
            readonly cellProfileAvatar: "bui-TableCellProfileAvatar";
            readonly cellProfileAvatarImage: "bui-TableCellProfileAvatarImage";
            readonly cellProfileAvatarFallback: "bui-TableCellProfileAvatarFallback";
            readonly cellProfileName: "bui-TableCellProfileName";
            readonly cellProfileLink: "bui-TableCellProfileLink";
        };
    };
    readonly Tabs: {
        readonly classNames: {
            readonly tabs: "bui-Tabs";
            readonly tabList: "bui-TabList";
            readonly tabListWrapper: "bui-TabListWrapper";
            readonly tab: "bui-Tab";
            readonly tabActive: "bui-TabActive";
            readonly tabHovered: "bui-TabHovered";
            readonly panel: "bui-TabPanel";
        };
    };
    readonly Text: {
        readonly classNames: {
            readonly root: "bui-Text";
        };
        readonly dataAttributes: {
            readonly variant: readonly ["subtitle", "body", "caption", "label"];
            readonly weight: readonly ["regular", "bold"];
            readonly color: readonly ["primary", "secondary", "danger", "warning", "success"];
            readonly truncate: readonly [true, false];
        };
    };
    readonly TextField: {
        readonly classNames: {
            readonly root: "bui-TextField";
            readonly inputWrapper: "bui-InputWrapper";
            readonly input: "bui-Input";
            readonly inputIcon: "bui-InputIcon";
        };
        readonly dataAttributes: {
            readonly invalid: readonly [true, false];
            readonly disabled: readonly [true, false];
        };
    };
    readonly Tooltip: {
        readonly classNames: {
            readonly tooltip: "bui-Tooltip";
            readonly arrow: "bui-TooltipArrow";
        };
    };
}