@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)	Displays alerts from AlertApi
AppIcon(props)	A component that renders a system icon by its id.
AutoLogout(props)	The Autologout feature enables platform engineers to add a mechanism to log out users after a configurable amount of time of inactivity. When enabled, the mechanism will track user actions (mouse movement, mouse click, key pressing, taps, etc.) in order to determine if they are active or not. After a certain amount of inactivity/idle time, the user session is invalidated and they are required to sign in again.
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)
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.
FavoriteToggle(props)	Toggle encapsulating logic for marking something as favorite, primarily used in various instances of entity lists and cards but can be used elsewhere. This component can only be used in as a controlled toggle and does not keep internal state.
FavoriteToggleIcon(props)	Icon used in FavoriteToggle component. Can be used independently, useful when used as in
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)
HorizontalScrollGrid(props)	Horizontal scrollable component with arrows to navigate
IconLinkVertical({ color, disabled, href, icon, label, onClick, title, })
InfoCard(props)	Material-ui card with header , content and actions footer
ItemCard(props)	This card type has been deprecated. Instead use plain Material UI Card and helpers where appropriate.
ItemCardGrid(props)	A default grid to use when arranging "item cards" - cards that let users select among several options.
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.
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.
LinkButton(props)	Thin wrapper on top of material-ui's Button component
LogViewer(props)	A component that displays logs in a scrollable text area.
MarkdownContent(props)	Renders markdown with the default dialect gfm - GitHub flavored Markdown to backstage theme styled HTML.
MissingAnnotationEmptyState(props)
MobileSidebar(props)	A navigation component for mobile screens, which sticks to the bottom.
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.
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.
SidebarGroup(props)	Groups items of the Sidebar together.
SidebarItem(props)	Creates a SidebarItem
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)
StarIcon(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.
Table(props)
TrendLine(props)
UnstarredIcon(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)
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.
useSupportConfig()
WarningIcon(props)
WarningPanel(props)	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
StructuredMetadataTableProps
TableColumn
TableOptions
TableProps

Namespaces

Namespace	Description
DependencyGraphTypes	Types for the DependencyGraph() component.
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

Type Aliases

Type Alias	Description
AlertDisplayProps	Properties for AlertDisplay()
AppIconProps	Props for the AppIcon() component.
AutoLogoutProps
AvatarClassKey
BackstageContentClassKey
BackstageOverrides
BoldHeaderClassKey
BottomLinkClassKey
BottomLinkProps
BreadcrumbsClickableTextClassKey
BreadcrumbsCurrentPageClassKey
BreadcrumbsStyledBoxClassKey
ButtonProps
CardActionsTopRightClassKey
CardTabClassKey
ClosedDropdownClassKey
ContentHeaderClassKey
CreateButtonProps	Properties for CreateButton()
CustomProviderClassKey
DependencyGraphDefaultLabelClassKey
DependencyGraphDefaultNodeClassKey
DependencyGraphEdgeClassKey
DependencyGraphNodeClassKey
DismissableBannerClassKey
DismissbleBannerClassKey
EmptyStateClassKey
EmptyStateImageClassKey
ErrorBoundaryProps
ErrorPageClassKey
ErrorPanelClassKey
ErrorPanelProps
FavoriteToggleIconClassKey
FeatureCalloutCircleClassKey
FiltersContainerClassKey
GaugeCardClassKey
GaugeClassKey
GaugeProps
GaugePropsGetColor
GaugePropsGetColorOptions
HeaderActionMenuItem
HeaderActionMenuProps
HeaderClassKey
HeaderIconLinkRowClassKey
HeaderLabelClassKey
HeaderTabsClassKey
HorizontalScrollGridClassKey
IconComponentProps	Props for the IconComponent component.
IconLinkVerticalClassKey
IconLinkVerticalProps
IdentityProviders
InfoCardClassKey
InfoCardVariants
ItemCardGridClassKey
ItemCardGridProps
ItemCardHeaderClassKey
ItemCardHeaderProps
LifecycleClassKey
LinkButtonProps	Properties for LinkButton()
LinkClassKey
LinkProps
LoginRequestListItemClassKey
LogViewerClassKey	Class keys for overriding LogViewer styles
MarkdownContentClassKey
MetadataTableCellClassKey
MetadataTableListClassKey
MetadataTableListItemClassKey
MetadataTableTitleCellClassKey
MicDropClassKey
MobileSidebarProps	Props of MobileSidebar
OAuthRequestDialogClassKey
OpenedDropdownClassKey
OverflowTooltipClassKey
PageClassKey
ProxiedSignInPageProps	Props for ProxiedSignInPage().
ResponseErrorPanelClassKey
SelectClassKey
SelectedItems
SelectInputBaseClassKey
SelectItem
SidebarClassKey
SidebarContextType	Types for the SidebarContext
SidebarDividerClassKey
SidebarItemClassKey
SidebarOpenState	The open state of the sidebar.
SidebarOptions
SidebarPageClassKey
SidebarPageProps	Props for SidebarPage
SidebarPinState	The pin state of the sidebar.
SidebarPinStateContextType	Type of SidebarPinStateContext
SidebarProps
SidebarSpaceClassKey
SidebarSpacerClassKey
SidebarSubmenuClassKey
SidebarSubmenuItemClassKey
SidebarSubmenuItemDropdownItem	Clickable item displayed when submenu item is clicked. title: Text content of item to: Path to navigate to when item is clicked
SidebarSubmenuItemProps	Holds submenu item content.
SidebarSubmenuProps	Holds a title for text Header of a sidebar submenu and children components to be rendered inside SidebarSubmenu
SignInPageClassKey
SignInProviderConfig
SimpleStepperFooterClassKey
SimpleStepperStepClassKey
StackDetailsClassKey
StatusClassKey
StructuredMetadataTableListClassKey
StructuredMetadataTableNestedListClassKey
SubmenuOptions
SubvalueCellClassKey
SupportButtonClassKey
SupportConfig
SupportItem
SupportItemLink
Tab
TabbedCardClassKey
TableClassKey
TableFilter
TableFiltersClassKey
TableHeaderClassKey
TableState
TableToolbarClassKey
WarningPanelClassKey