Tags - Done
Description
Tags are small, reusable UI components designed to visually represent labels, statuses, or categories. They are styled differently based on their context (e.g., “Success,” “Warning,” “Danger”) and are designed to be consistent and easily customizable across applications.
HTML Structure
The tag-container wraps multiple tag elements. Each tag represents a distinct label or category.
- Container Class: tag-container Acts as a wrapper to contain a one or more tags and space them evenly on a page.
- Tag Class: tag Used for the individual tags.
- Modifier Classes: success, warning, danger, info – Applied to differentiate tag styles.
<div class="tag-container">
<div class="tag">Standard</div>
<div class="tag success">Success</div>
<div class="tag warning">Warning</div>
<div class="tag danger">Danger</div>
<div class="tag info">Info</div>
</div>How to Use
1. Adding a Tag:
Add a new <div> element inside the tag-container with the tag class. Use modifier classes for contextual styles as needed.
<div class="tag">New Tag</div>2. (Optional) Add a Modifier Tag:
Use the pre-defined modifier classes (success, warning, danger, info) to style the tags appropriately.
- .success: Indicates success, typically styled with a green background.
- .warning: Indicates caution or attention, typically styled with a yellow/orange background.
- .danger: Indicates errors or critical issues, typically styled with a red background.
- .info: Provides informational context, typically styled with a blue background.
<div class="tag success">New Tag</div>3. Customizing Content:
Change the text inside the tag element to reflect the label or category.
<div class="tag">Custom Label</div>Adding a Tooltip to Tags
To add a tooltip to a tag, use the data-tippy-content attribute with the desired tooltip text. You can also control the tooltip’s placement using the data-placement attribute.
Example Structure with Tooltips
<div class="tag-container">
<div class="tag" data-tippy-content="This is a standard tag">Standard</div>
<div class="tag success" data-tippy-content="Operation was successful" data-placement="top">Success</div>
<div class="tag warning" data-tippy-content="This is a warning">Warning</div>
<div class="tag danger" data-tippy-content="Critical error occurred" data-placement="left">Danger</div>
<div class="tag info" data-tippy-content="Informational message" data-placement="right">Info</div>
</div>