# Component tags

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](https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/set-up-your-dashbard),  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. 

{% hint style="info" %}
"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](https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/ensure-data-accuracy "mention")
{% endhint %}

## 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.

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FEhizeR6eogTP8TyHBDol%2FCreate%20tag.png?alt=media&#x26;token=7eae9b1a-bf00-4b9e-91c2-9a6986d161dd" alt="Creating a new tag"><figcaption><p>Creating a new tag</p></figcaption></figure>

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: [component-catalog](https://docs.omlet.dev/cli-and-dashboard/components/component-catalog "mention")

### 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](https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/custom-component-properties). These custom properties can then be used to filter and tag components—giving you more control over how to analyze your design system.

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2Fs6Ywv7qtsCB3LTcPh828%2F2024-07-24%2012.23.17.gif?alt=media&#x26;token=351006c2-5df5-4bb4-84a0-170553762fb5" alt=""><figcaption><p>Creating a tag using custom properties</p></figcaption></figure>

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](https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/custom-component-properties "mention")

{% hint style="info" %}
Custom properties are available only on the Advanced plan, check out [pricing](https://docs.omlet.dev/help/pricing "mention") for more details.
{% endhint %}

## 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.

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FGVlYCDhcIOELQEmt4wT1%2FUpdate%20tag%20filters.png?alt=media&#x26;token=710f3ef1-67fa-48dd-b959-a82ade48f311" alt=""><figcaption><p>Updating an existing tag</p></figcaption></figure>

### 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".

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FO7SlRITI4bWcCRwlaPJG%2FRename%20tag.png?alt=media&#x26;token=9b5cbc5c-30a7-465b-9c7b-a7fde927c2f0" alt=""><figcaption><p>Renaming a tag</p></figcaption></figure>

### 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".

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FBkILu2HJztEn4xYfBdxo%2FDelete%20tag.png?alt=media&#x26;token=1c584349-070d-4a94-85f6-b5952b4993d5" alt=""><figcaption><p>Deleting a tag</p></figcaption></figure>

{% hint style="info" %}
Deleting a tag will not remove the components that has this tag. To remove components from your workspace, check out: [excluding-certain-components-and-files](https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/config-file/excluding-certain-components-and-files "mention")
{% endhint %}