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.
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.
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 & plans 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.
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".
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 will not remove the components that has this tag. To remove components from your workspace, check out: Excluding certain components & files
Last updated
