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>These colors are used for special purposes like ring, scrollbar, ...
| 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. |
| --bui-gray-1 | You can use these mostly for backgrounds colors. |
| --bui-gray-2 | You can use these mostly for backgrounds colors. |
| --bui-gray-3 | You can use these mostly for backgrounds colors. |
| --bui-gray-4 | You can use these mostly for backgrounds colors. |
| --bui-gray-5 | You can use these mostly for backgrounds colors. |
| --bui-gray-6 | You can use these mostly for backgrounds colors. |
| --bui-gray-7 | You can use these mostly for backgrounds colors. |
| --bui-gray-8 | You can use these mostly for backgrounds colors. |
These colors are used for the background of your application. We are mostly using for now a
single elevated background for panels. --bui-bg should mostly use as the main background
color of your app.
| Prop | Description |
|---|---|
| --bui-bg | The background color of your Backstage instance. |
| --bui-bg-surface-1 | Use for any panels or elevated surfaces. |
| --bui-bg-surface-2 | Use for any panels or elevated surfaces. |
| --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. |
| --bui-bg-tint | Used for tint background colors. |
| --bui-bg-tint-hover | Used for tint background colors when hovered. |
| --bui-bg-tint-focus | Used for tint background colors when active. |
| --bui-bg-tint-disabled | Used for tint background colors when disabled. |
| --bui-bg-danger | Used to show errors information. |
| --bui-bg-warning | Used to show warnings information. |
| --bui-bg-success | Used to show success information. |
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-link | It should be used on top of main background surfaces. |
| --bui-fg-link-hover | 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-tint | It should be used on top of tint background colors. |
| --bui-fg-tint-disabled | It should be used on top of tint background colors when disabled. |
| --bui-fg-danger | It should be used on top of danger background colors. |
| --bui-fg-warning | It should be used on top of warning background colors. |
| --bui-fg-success | It should be used on top of success 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 | It should be used on top of --bui-bg-surface-1. |
| --bui-border-hover | Used when the component is interactive and hovered. |
| --bui-border-pressed | Used when the component is interactive and focused. |
| --bui-border-disabled | Used when the component is disabled. |
| --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. |
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 |