0

I have this kind of Tabs in my design, however I have to integrate count of the items (which I did with just a circle and number inside), and I need Status like thing since one of those tabs (in my case it's restoraunt menu) has to be active. Now tricky thing is that I tried making it like my primary color when it's active (when you're on selected tab) but problem is how can I leave that tab Active as Status when I leave to the next tab (which is inactive) ?

Image of navigation items with placeholder names. The first has blue text and a blue underline. The rest are black text with no underline. All have a white background.

Improve this question
3
  • I'm having trouble understanding your problem. The "status" you're talking about is just the tab's active state, shown when the user is currently viewing that tab, correct? When the user clicks into a new tab, that active state will transfer to the other tab? You said "how can I leave that tab Active as Status when I leave to the next tab"... are you trying to keep the previous tab showing an active state even after the user leaves it?
    – maxathousand
    Aug 17 at 16:10
  • I understand the question, but you should add a mockup to build the answer from it. You are talking about primary color, active tab, inactive tab, status colors, etc. leaving too many items to the imagination.
    – Danielillo
    Aug 22 at 21:54
  • Okay well, these are the menus. In POS system user can set menu which will be active (NOT on here on tabs). And when he sets it one of them here in tabs becomes active and when I say active I mean activated. However since I can switch let's say some other tab which is not active like on the case below on the picture, my solution was to leave the tab that Activated to be in color but without the bottom line/stroke. However managers don't like this solution they want some other indicator that menu is active i.imgur.com/JUiT9U7.png
    – Paco
    Aug 25 at 7:53

1 Answer 1

Reset to default
0

If you take a look at the Material 3 Design System and see the different types of states a tab can have, you'll find that there are the following you can use to create the status required:

  • Enabled
  • Hover
  • Focus
  • Pressed

That means you can use the Enabled for all the tabs that are active, and then for each of the hover, focus or pressed behaviour you can use a variation of the main colour palette to indicate different states or statuses as required.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.