Icons in Tabs

[ankigupta92]

Hello, is it okay to use icons in Tabs? I have not seen a version of the attached screenshot in our design system.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi there!

Tabs can take any non-interactive content. Placing a badge inside should be just fine, which implies that using icons within Tabs should also be acceptable as long as they are non-interactive. This flexibility allows for the inclusion of various elements to meet design needs.

Thanks

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Badge inside Tabs? (updated: 11/29/2023, similarity score: 85%)
• Vertical tab - is this the right usage? (updated: 02/01/2023, similarity score: 85%)
• Open/closed folder icons - Answer (updated: 07/03/2023, similarity score: 84%)

[dosubot[bot]]

Hey @ankigupta92! I'm here to help you with any bugs, questions, or contributions. Let's tackle this together!

I couldn't find specific guidelines or components in the Paste design system documentation that address using icons within Tabs. However, when integrating custom icons into existing Paste components, it's important to follow best practices for accessibility and consistency:

1. Accessibility: Determine if the icon is decorative or informative. If it's decorative, set the decorative prop to true and omit the title. If it's informative, set decorative to false and provide a meaningful title for assistive technologies.

2. Pair Icons with Text: Always pair icons with text to ensure clarity across different cultures and contexts.

3. Non-interactive Icons: Icons should not be directly interactive. Instead, wrap them in interactive components like Button or Anchor.

4. Color and Size Customization: Use text color tokens to change icon colors and sizeIcon tokens to resize icons.

5. Import Icons Individually: Import only the icons you need to optimize performance ^[1].

These practices ensure that icons are accessible, clear, and efficiently integrated into Paste components.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}