@backstage/core-components
Home > @backstage/core-components
Core components used by Backstage plugins and apps
Classes
| Class | Description |
|---|---|
| UserIdentity | An implementation of the IdentityApi that is constructed using various backstage user identity representations. |
Functions
| Function | Description |
|---|---|
| AlertDisplay(props) | |
| Avatar(props) | Component rendering an Avatar |
| BottomLink(props) | Footer with link used in InfoCard() and TabbedCard() |
| Breadcrumbs(props) | Breadcrumbs component to show navigation hierarchical structure |
| BrokenImageIcon(props) | Broken Image Icon |
| Button(props) | Thin wrapper on top of material-ui's Button component |
| CardTab(props) | Card tab component used in TabbedCard() |
| CatalogIcon(props) | |
| ChatIcon(props) | |
| CodeSnippet(props) | Thin wrapper on top of react-syntax-highlighter providing consistent theming and copy code button |
| Content(props) | The main content part inside a Page(). |
| ContentHeader(props) | A header at the top inside a Content(). |
| CopyTextButton(props) | Copy text button with visual feedback |
| CreateButton(props) | Responsive Button giving consistent UX for creation of different things |
| DashboardIcon(props) | |
| DependencyGraph(props) | Graph component used to visualize relations between entities |
| DismissableBanner(props) | |
| DocsIcon(props) | |
| EmailIcon(props) | |
| EmptyState(props) | Various placeholder views for empty state pages |
| ErrorPage(props) | Error page with status and description |
| ErrorPanel(props) | Renders a warning panel as the effect of an error. |
| FeatureCalloutCircular(props) | One-time, round 'telescope' animation showing new feature. |
| Gauge(props) | Circular Progress Bar |
| GaugeCard(props) | Gauge() with header, subheader and footer |
| GitHubIcon(props) | |
| GroupIcon(props) | |
| Header(props) | Backstage main header with abstract color background in multiple variants |
| HeaderActionMenu(props) | |
| HeaderIconLinkRow(props) | HTML nav tag with links mapped inside |
| HeaderLabel(props) | Additional label to main Header() |
| HeaderTabs(props) | Horizontal Tabs component |
| HelpIcon(props) | |
| HomepageTimer(_props) | Please use the HeaderWorldClock in the home plugin |
| HorizontalScrollGrid(props) | Horizontal scrollable component with arrows to navigate |
| InfoCard(props) | Material-ui card with header , content and actions footer |
| IntroCard(props) | Closable card with information from Navigation Sidebar |
| ItemCard(props) | This card type has been deprecated. Instead use plain MUI Card and helpers where appropriate. |
<Card>
<CardMedia>
<ItemCardHeader title="My Card" subtitle="neat!" />
</CardMedia>
<CardContent>
Some text
</CardContent>
<CardActions>
<Button color="primary" to="https://backstage.io">
Get Started
</Button>
</CardActions>
</Card>
|
| ItemCardGrid(props) | A default grid to use when arranging "item cards" - cards that let users select among several options.The immediate children are expected to be MUI Card components.Styles for the grid can be overridden using the classes prop, e.g.:<ItemCardGrid title="Hello" classes={{ root: myClassName }} />This can be useful for e.g. overriding gridTemplateColumns to adapt the minimum size of the cells to fit the content better. |
| ItemCardHeader(props) | A simple card header, rendering a default look for "item cards" - cards that are arranged in a grid for users to select among several options.This component expects to be placed within a MUI <CardMedia>.Styles for the header can be overridden using the classes prop, e.g.:<ItemCardHeader title="Hello" classes={{ root: myClassName }} /> |
| Lifecycle(props) | |
| LinearGauge(props) | |
| Link(props) | Thin wrapper on top of material-ui's Link component, which... - Makes the Link use react-router - Captures Link clicks as analytics events. |
| LogViewer(props) | A component that displays logs in a scrollable text area.The LogViewer has support for search and filtering, as well as displaying text content with ANSI color escape codes.Since the LogViewer uses windowing to avoid rendering all contents at once, the log is sized automatically to fill the available vertical space. This means it may often be needed to wrap the LogViewer in a container that provides it with a fixed amount of space. |
| MarkdownContent(props) | MarkdownContent -- Renders markdown with the default dialect [gfm - GitHub flavored Markdown](https://github.github.com/gfm/) to backstage theme styled HTML. If you just want to render to plain [CommonMark](https://commonmark.org/), set the dialect to 'common-mark' |
| MissingAnnotationEmptyState(props) | |
| MobileSidebar(props) | A navigation component for mobile screens, which sticks to the bottom.It alternates the normal sidebar by grouping the SidebarItems based on provided SidebarGroups either rendering them as a link or an overlay menu. If no SidebarGroups are provided the sidebar content is wrapped in an default overlay menu. |
| OAuthRequestDialog(_props) | |
| OverflowTooltip(props) | |
| Page(props) | |
| PageWithHeader(props) | |
| Progress(props) | |
| ProxiedSignInPage(props) | A sign-in page that has no user interface of its own. Instead, it relies on sign-in being performed by a reverse authenticating proxy that Backstage is deployed behind, and leverages its session handling. |
| ResponseErrorPanel(props) | Renders a warning panel as the effect of a failed server request.Has special treatment for ResponseError errors, to display rich server-provided information about what happened. |
| RoutedTabs(props) | |
| Select(props) | |
| Sidebar(props) | Passing children into the desktop or mobile sidebar depending on the context |
| SidebarExpandButton() | A button which allows you to expand the sidebar when clicked. Use optionally to replace sidebar's expand-on-hover feature with expand-on-click.If you are using this you might want to set the disableExpandOnHover of the Sidebar to true. |
| SidebarGroup(props) | Groups items of the Sidebar together.On bigger screens, this won't have any effect at the moment. On small screens, it will add an action to the bottom navigation - either triggering an overlay menu or acting as a link |
| SidebarIntro(_props) | |
| SidebarItem(props) | Creates a SidebarItemIf children contain a SidebarSubmenu component the SidebarItem will have a expandable submenu |
| SidebarOpenStateProvider(props) | Provides context for reading and updating sidebar state. |
| SidebarPage(props) | |
| SidebarPinStateProvider(props) | Provides state for how the Sidebar is rendered |
| SidebarSearchField(props) | |
| SidebarSubmenu(props) | Used inside SidebarItem to display an expandable Submenu |
| SidebarSubmenuItem(props) | Item used inside a submenu within the sidebar. |
| SignInPage(props) | |
| SimpleStepper(props) | |
| SimpleStepperStep(props) | |
| StatusAborted(props) | |
| StatusError(props) | |
| StatusOK(props) | |
| StatusPending(props) | |
| StatusRunning(props) | |
| StatusWarning(props) | |
| StructuredMetadataTable(props) | |
| SubvalueCell(props) | |
| SupportButton(props) | |
| TabbedCard(props) | |
| TabbedLayout(props) | TabbedLayout is a compound component, which allows you to define a layout for pages using a sub-navigation mechanism.Consists of two parts: TabbedLayout and TabbedLayout.Route |
| Table(props) | |
| Tabs(props) | |
| TrendLine(props) | |
| useContent() | This hook provides a react ref to the main content. Allows to set an element as the main content and focus on that component.*Note: If contentRef is not set focusContent is noop. Content component sets this ref automatically* |
| useQueryParamState(stateName, debounceTime) | |
| UserIcon(props) | |
| useSupportConfig() | |
| WarningIcon(props) | |
| WarningPanel(props) | WarningPanel. Show a user friendly error message to a user similar to ErrorPanel except that the warning panel only shows the warning message to the user. |
Interfaces
| Interface | Description |
|---|---|
| AvatarProps | Properties for Avatar(). |
| CodeSnippetProps | Properties for CodeSnippet() |
| CopyTextButtonProps | Properties for CopyTextButton() |
| DependencyGraphProps | Properties of DependencyGraph() |
| LogViewerProps | The properties for the LogViewer component. |
| SidebarGroupProps | Props for the SidebarGroup |
| TableColumn | |
| TableProps |
Namespaces
| Namespace | Description |
|---|---|
| DependencyGraphTypes | |
| TabbedLayout | |
| Table |
Variables
| Variable | Description |
|---|---|
| ErrorBoundary | |
| SIDEBAR_INTRO_LOCAL_STORAGE | |
| sidebarConfig | |
| SidebarContext | Context whether the Sidebar is open |
| SidebarDivider | |
| SidebarPinStateContext | Contains the state on how the Sidebar is rendered |
| SidebarScrollWrapper | |
| SidebarSpace | |
| SidebarSpacer | |
| useSidebarOpenState | Hook to read and update the sidebar's open state, which controls whether or not the sidebar is open and full-width, or closed and only displaying icons. |
| useSidebarPinState | Hook to read and update sidebar pin state, which controls whether or not the sidebar is pinned open. |