Tab
A tab component is a versatile UI element that organizes content into separate views, each accessible through individual tabs. It enhances user experience by allowing easy navigation between different sections without reloading the page, making it ideal for displaying related content in a compact space.
1.1. (Default) Tab List Position: Block Start
1.2. Tab List Position: Block End
1.3. Tab List Position: Inline Start
1.4. Tab List Position: Inline End
1.5. With Icons
1.7. With Close Button
Set the closeButton property to true to show a close button on each tab. When clicked, it triggers the itemClose event.
⚠️ Note: Tabs are not removed automatically. It's up to the developer to handle tab removal.
💡 Why? This gives you full control over how and when tabs are closed, which is especially useful when you need to confirm actions, save data, or prevent accidental loss. Tabs won't close automatically. You will have to manage closing the tab.
1.6. Sortable Buttons
Click and drag any button to sort
1.8. Items Disabled: Block
1.9. Items Disabled: Inline
1.10. Elevation 1
Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a surface background (body background color), the .elevation-1 class is unnecessary, as it is applied by default.
1.11. Elevation 2
Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a .elevation-1 background color, apply .elevation-2 class on the component.
1.12. Elevation 3
Mercury DS offers elevation classes that enhance component visibility by applying a subtle, lighter gray background. When a component is placed over a .elevation-2 background color, apply .elevation-3 class on the component.