Component tags

Learn how to create tags to use in your custom analyses.

Omlet lets you tag a subset of your components using various filters which you can use to easily search components, and generate charts for your specific needs.

Here are some use cases that you might want to create tags in Omlet for:

• Track usage decrease of deprecated components

• Track usage of a legacy library that you're going to deprecate

• Multiple design system libraries that you want to track individually

• Map certain projects or directories to product teams

• Track migration to the latest version of a component

Your workspace comes with two default tags:

• Design system: This is the tag you defined while setting up your dashboard with CLI, such as "Core", "UI Kit", and "Library". This tag helps you analyze the adoption of your design system or component library.

• External: This is a default tag provided by Omlet where components from 3rd-party libraries are tagged as "external" by default.

"External" tag is generated automatically by Omlet based on your dependencies and it's not possible to update it within the app. If some of your components were tagged as "External" incorrectly, check out: Ensure data accuracy

Create tags

Creating tags using component properties

You can create tags using the built-in properties provided by Omlet. To create a tag, filter the components based on some criteria from the Component catalog and select the "Create new tag" button on the top-right.

Let's say to tag all button components in your codebase, you can use the "Name" property to filter the components that contains "Button" in their name and create a tag from this filter.

Creating a new tag

There are various other properties that you can use to filter and tag components, such as which projects they're from, how many times they're used and when they're created/updated. To learn more about these properties, check out: Search and filter components

Creating tags using custom properties

In addition to Omlet’s built-in properties, you can assign custom properties to your components using Omlet’s CLI hooks. These custom properties can then be used to filter and tag components—giving you more control over how to analyze your design system.

Creating a tag using custom properties

For example, you can add properties such as:

• Is visual component?: Whether the component is a visual component or not.

• Owner: The code owner information in the CODEOWNERS file or any custom source.

• Number of props: The number of props a component has.

• Has stories: True or false depending on whether the component has Storybook stories.

• Has tests: True or false depending on whether the component has tests implemented.

See our docs to learn more about CLI hooks and how to add custom properties: Custom component properties

Custom properties are available only on the Advanced plan, check out Pricing for more details.

Update tags

Updating filters in a tag

To add/remove components from a tag, select the tag from the left panel on your Components catalog and update the filters as necessary. Once you're happy with the result, you can select the "Update tag" button on the right to save the changes.

Updating an existing tag

Renaming a tag

To rename a tag, hover over that tag from the left panel on the Components catalog, click the menu button (...) and select "Rename tag".

Renaming a tag

Deleting a tag

To delete a tag, hover over that tag from the left panel on the Components catalog, click the menu button (...) and select "Delete tag".

Deleting a tag

Deleting a tag will not remove the components that has this tag. To remove components from your workspace, check out: Excluding certain components & files