Skip to main content
Version: Next

@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