TabBar: an icon, a label, and 17 properties

by GoodBarber

GoodBarber is a mobile app builder for iOS, Android and PWA. This shot takes apart the smallest piece of a TabBar: a single navigation item. What looks like an icon and a word is a component with 17 properties. The item carries its own background, border, shadow, shape, size, orientation, padding and spacing. The icon and the label each carry theirs. And 17 is the floor, not the ceiling: every layout property exists per device, and a selected state can redefine almost all of them. https://www.goodbarber.com/uxdesign/