Component blocks

Display components from your design system.

Component blocks can be used in your documentation to display Supernova components in your design system, and different properties attached to them.

There are three component blocks to choose from: component healthcomponent checklist, and component overview table.

Ref to 1558:22217

Each component block shows a view of selected component properties. You can choose from the following properties to display:

  • Figma — A link to the component in the Figma data source.
  • Health — The health status of the component.
  • Repository — A link to the component in a repository.
  • Deprecated — An indication of whether the component is deprecated or not.
  • Last edited — The time when the component was last edited.

Component health

The component health block shows a detailed view of a single component’s properties.

Component blocks in menu

Add a component health block

  1. Select Component health from the block menu.
  2. Select the component you want to display.
  3. Select the properties you want to display in the property panel at the side.
  4. To change the component in the block, select a new one in the property panel from the dropdown in the Content section.
Component health - empty
Component health - filled

Component checklist

The component checklist block displays a table showing a selected component, and highlighting selected properties of the component.

Component blocks in menu

Add a component checklist block

  1. Select Component checklist from the block menu.
  2. Select the component you want to display.
  3. Select the property (or properties) you want to display in the property panel at the side.
  4. To change the component in the block, select a new one in the property panel from the dropdown in the Content section.
Component checklist - empty
Component checklist - filled

Component overview table

The component overview table block displays all of the components linked in your design system in a table. You can select any properties you want to display in the table, and have an option to add the date of each component’s last update.

Component blocks in menu

Add a component overview table block

  1. Select Component overview table from the block menu.
  2. Select the property (or properties) you want to display in the property panel at the side.
Component overview - filled

Examples

Healthy
Show details
Healthy
Published: July 30, 2024
Updated: February 05, 2025

Component checklist

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

Is documented

The component is fully documented by our standards.

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

In UI library

Is included in our Figma library UI library.

Figma component

Includes a link to a Figma component that has been imported to Supernova

Status

The component has a health status indicated

Needs attention
Component Figma component Status Accessible use of color
Alert Open in Figma Needs attention
Avatar Open in Figma Healthy
Button Gradient Open in Figma Deprecated
Button Positive Open in Figma Healthy
Button Primary Open in Figma Healthy
Button Secondary Open in Figma Healthy

Similar blocks