Backstage UI is built on a responsive design system, meaning that the components are designed to adapt to different screen sizes. By default we offer a set of breakpoints that you can use to create responsive components.
| Breakpoint prefix | Minimum width | CSS |
|---|---|---|
| xs | 0px | { ... } |
| sm | 640px | @media (min-width: 640px) { ... } |
| md | 768px | @media (min-width: 768px) { ... } |
| lg | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
| 2xl | 1536px | @media (min-width: 1536px) { ... } |
Backstage UI components are designed to be responsive, meaning that they will adapt to different screen sizes. Not every component is responsive, but the ones that are will have a prop to control the responsive behavior.
The behaviour is the same for each component. For each prop, instead of adding the value, you add an object with the value and the breakpoint prefix.
// Fixed value
<Button size="small">Button</Button>
// Responsive value
<Button size={{ xs: 'small', md: 'medium' }}>Button</Button>| Prop | Description |
|---|---|
| --bui-black | Pure black color. This one should be the same in light and dark themes. |
| --bui-white | Pure white color. This one should be the same in light and dark themes. |
These colors form a layered neutral scale for your application backgrounds.
--bui-bg-app is the base background color of your app. Each subsequent level
(1 through 4) represents an elevated layer on top of the previous one, with hover,
pressed, and disabled variants for interactive states.
| Prop | Description |
|---|---|
| --bui-bg-app | The base background color of your Backstage instance. |
| --bui-bg-neutral-1 | First elevated layer. Use for cards, dialogs, and panels. |
| --bui-bg-neutral-1-hover | Hover state for elements on neutral-1. |
| --bui-bg-neutral-1-pressed | Pressed state for elements on neutral-1. |
| --bui-bg-neutral-1-disabled | Disabled state for elements on neutral-1. |
| --bui-bg-neutral-2 | Second elevated layer. Use for elements on top of neutral-1. |
| --bui-bg-neutral-2-hover | Hover state for elements on neutral-2. |
| --bui-bg-neutral-2-pressed | Pressed state for elements on neutral-2. |
| --bui-bg-neutral-2-disabled | Disabled state for elements on neutral-2. |
| --bui-bg-neutral-3 | Third elevated layer. Use for elements on top of neutral-2. |
| --bui-bg-neutral-3-hover | Hover state for elements on neutral-3. |
| --bui-bg-neutral-3-pressed | Pressed state for elements on neutral-3. |
| --bui-bg-neutral-3-disabled | Disabled state for elements on neutral-3. |
| --bui-bg-neutral-4 | Fourth elevated layer. Use for elements on top of neutral-3. |
| --bui-bg-neutral-4-hover | Hover state for elements on neutral-4. |
| --bui-bg-neutral-4-pressed | Pressed state for elements on neutral-4. |
| --bui-bg-neutral-4-disabled | Disabled state for elements on neutral-4. |
| Prop | Description |
|---|---|
| --bui-bg-solid | Used for solid background colors. |
| --bui-bg-solid-hover | Used for solid background colors when hovered. |
| --bui-bg-solid-pressed | Used for solid background colors when pressed. |
| --bui-bg-solid-disabled | Used for solid background colors when disabled. |
| Prop | Description |
|---|---|
| --bui-bg-danger | Used to show errors information. |
| --bui-bg-warning | Used to show warnings information. |
| --bui-bg-success | Used to show success information. |
| --bui-bg-info | Used to show informational content. |
Foreground colours are meant to work in pair with a background colours. Typically this would work
for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors
are prefixed with fg to make it easier to identify.
| Prop | Description |
|---|---|
| --bui-fg-primary | It should be used on top of main background surfaces. |
| --bui-fg-secondary | It should be used on top of main background surfaces. |
| --bui-fg-disabled | It should be used on top of main background surfaces. |
| --bui-fg-solid | It should be used on top of solid background colors. |
| --bui-fg-danger | Used for error states and destructive actions. |
| --bui-fg-warning | Used for warning states and cautionary information. |
| --bui-fg-success | Used for success states and positive feedback. |
| --bui-fg-info | Used for informational content and neutral status. |
| --bui-fg-danger-on-bg | It should be used on top of danger background colors. |
| --bui-fg-warning-on-bg | It should be used on top of warning background colors. |
| --bui-fg-success-on-bg | It should be used on top of success background colors. |
| --bui-fg-info-on-bg | It should be used on top of info background colors. |
These border colors are mostly meant to be used as borders on top of any components with low contrast to help as a separator with the different background colors.
| Prop | Description |
|---|---|
| --bui-border-1 | Subtle border for low-contrast separators. |
| --bui-border-2 | It should be used on top of --bui-bg-neutral-1. |
| --bui-border-danger | It should be used on top of --bui-bg-danger. |
| --bui-border-warning | It should be used on top of --bui-bg-warning. |
| --bui-border-success | It should be used on top of --bui-bg-success. |
| --bui-border-info | It should be used on top of --bui-bg-info. |
These colors are used for special purposes like ring, scrollbar, ...
| Prop | Description |
|---|---|
| --bui-ring | The color of the ring. |
| --bui-scrollbar | The color of the scrollbar. |
| --bui-scrollbar-thumb | The color of the scrollbar thumb. |
We have two fonts that we use across Backstage UI. The first one is the sans-serif font that we use for the body of the application. The second one is the monospace font that we use for code blocks and tables.
| Prop | Description |
|---|---|
| --bui-font-regular | The sans-serif font for the theme. |
| --bui-font-monospace | The monospace font for the theme. |
We have two font weights that we use across Backstage UI. Regular or Bold.
| Prop | Description |
|---|---|
| --bui-font-weight-regular | The regular font weight for the theme. |
| --bui-font-weight-bold | The bold font weight for the theme. |
We built a spacing system based on a single value --bui-space. This value is
used to calculate the spacing for all the components. By default if you would like to
increase or decrease the spacing between your components you can do it simply by updating
--bui-space and it will apply to all spacing values.
--bui-space is not used directly in any components but serve as an easy way to
calculate the other values.
| Prop | Description |
|---|---|
| --bui-space | The base unit for the spacing system. Default value is |
Below is the list of all spacing values you can use in your application. We use these tokens for pretty much each spacing properties like padding, margin, gaps, ...
| Prop | Description |
|---|---|
| --bui-space-0_5 | Base unit (--bui-space) times 0.5. |
| --bui-space-1 | Base unit (--bui-space). |
| --bui-space-1_5 | Base unit (--bui-space) times 1.5. |
| --bui-space-2 | Base unit (--bui-space) times 2. |
| --bui-space-3 | Base unit (--bui-space) times 3. |
| --bui-space-4 | Base unit (--bui-space) times 4. |
| --bui-space-5 | Base unit (--bui-space) times 5. |
| --bui-space-6 | Base unit (--bui-space) times 6. |
| --bui-space-7 | Base unit (--bui-space) times 7. |
| --bui-space-8 | Base unit (--bui-space) times 8. |
| --bui-space-9 | Base unit (--bui-space) times 9. |
| --bui-space-10 | Base unit (--bui-space) times 10. |
| --bui-space-11 | Base unit (--bui-space) times 11. |
| --bui-space-12 | Base unit (--bui-space) times 12. |
| --bui-space-13 | Base unit (--bui-space) times 13. |
| --bui-space-14 | Base unit (--bui-space) times 14. |
We use a radius system to make sure that the components have a consistent look and feel.
| Prop | Description |
|---|---|
| --bui-radius-1 | The radius of the component. Default value is |
| --bui-radius-2 | The radius of the component. Default value is |
| --bui-radius-3 | The radius of the component. Default value is |
| --bui-radius-4 | The radius of the component. Default value is |
| --bui-radius-5 | The radius of the component. Default value is |
| --bui-radius-6 | The radius of the component. Default value is |
| --bui-radius-full | The radius of the component. Default value is |