A component that can be attached to elements or content as a label, offering customization options
A tag component is a label that can be attached to elements or content within your application, providing visual cues and options for customization.
Tag components offer the following key features:
Text Display: Tags display text content that can be customized to convey information or provide context.
Label Input: Users can enter text into the "Label" input, which determines the text displayed within the tag.
Rounded Tags: Tags can have rounded corners when the "Rounded" switch is enabled, creating a distinctive visual style.
Background Colors: Tags come with predefined background colors denoting their severity. Users can customize the background color by selecting the desired severity from the severity select dropdown. Note that the tag component should not have a background-color in its styles; otherwise, it will override the selected severity background color.
Styles: Customize the initial styles of the tag to align with your application's design.
To use tag components in your application, follow these steps:
Text Display: Use tag components to display text content that conveys information or context.
Label Input: Allow users to enter text into the "Label" input to determine the text displayed within the tag.
Rounded Tags: If you prefer rounded tags, enable the "Rounded" switch to give tags rounded corners.
Background Colors: Customize the background color of tags by selecting the desired severity from the severity select dropdown. Ensure that the tag component does not have a background-color in its styles to maintain the selected severity background color.
Tag components are commonly used in various scenarios, including:
Status indicators: Use tags to indicate the status of elements or content, such as "New," "Pending," or "Completed."
Labeling: Attach tags to items to provide additional information or labels, such as "Urgent," "Important," or "Featured."
Filtering and categorization: Implement tags to categorize and filter content based on specific attributes or categories.
Severity level indicators: Utilize tags to represent the severity or importance of items, such as "High Priority" or "Critical."
Tag components enhance the visual representation of information and provide quick, visual cues about the status or significance of elements in your application.
