Skip to main content

Customization (Experimental)


The Backstage core logic provides a possibility to make the component customizable in such a way that the application developer can redefine the labels, icons, elements or even completely replace the component. It's up to each plugin to decide what can be customized.

For a plugin developer

When you are creating your plugin, you have a possibility to use a metadata field and define there all customizable elements. For example

const plugin = createPlugin({
id: 'my-plugin',
options?: CatalogInputPluginOptions,
): CatalogPluginOptions {
const defaultOptions = {
createButtonTitle: 'Create',
return { ...defaultOptions, ...options };

And the rendering part of the exposed component can retrieve that metadata as:

export type CatalogPluginOptions = {
createButtonTitle: string;

export type CatalogInputPluginOptions = {
createButtonTitle: string;

export const useCatalogPluginOptions = () =>

export function DefaultMyPluginWelcomePage() {
const { createButtonTitle } = useCatalogPluginOptions();

return (

For an application developer using the plugin

The way to reconfigure the default values provided by the plugin you can do it via reconfigure method, defined on the plugin. Example:

import { myPlugin } from '@backstage/my-plugin';

createButtonTitle: 'New',