Component tags
Learn how to create tags to use in your custom analyses.
Last updated
Learn how to create tags to use in your custom analyses.
Last updated
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 , 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.
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
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
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.
To rename a tag, hover over that tag from the left panel on the Components catalog, click the menu button (...) and select "Rename 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".
In addition to Omlet’s built-in properties, you can assign custom properties to your components using Omlet’s . These custom properties can then be used to filter and tag components—giving you more control over how to analyze your design system.
