Extension Tab Bar

the extension tab bar is a vertical panel located on the right side of the extension content it helps users navigate between different tabs, allowing them to access the content of the toolboxes ( extension content docid\ k9e w3zzkehm38jtvqkyu ) anatomy a extension bar container background colour neutral/grey 2 (#f7f7f7) border colour border/border 1 (#b3b3b3) width 54px height varies based on application height border top weight 0 border left, right, bottom weight 1 b pin separator border color border/border 1 (#b3b3b3) width 50px height 1px c extension icon icon flooring size 24x24 alignment center d extension group border colour neutral/grey 86 (#242424) width 1px height 34px state collapsed e active tab background colour primary/p200 (#cadeed) width 52px height 32px state selected f lazy indicator background colour neutral/grey 50 (#808080) size 2x2 alignment right g tab line background colour border/border 2 (#e6e6e6) width 52px height 1px layout & spacing toolbox card extension icons size no more than usages a image (default) 24x24 when an image is no larger than 24x24 in size b image (wide) 44x24 when an image is larger than 24x24 in size or in need of a wider width c only text 44x24 when an extension tab has no image and only text d image & text 44x24 when in need of both image and text in a single toolbox card an image can consists of an icon, logo or rendered product a text can consists of initials and short extension tab titles image and text are always center aligned text style recommended font segoe ui size 7 colour icon/stroke (#242424) line height 10 letter case uppercase maximum line 2 lines rules to follow toolbox card size must always be 52x32 in size content size must always obey the 24x24 or 44x24 rules do not change selected state color and size always have 1px spacing in between each toolbox card, tab line and pin separator if branding text styles are not available, follow the recommended text styles a image (default) b image (wide) c only text note the developer features to add text, background color, and accent bars through code are not available at the moment as of 15 5 (november 2024) release, but we are working hard on bringing this to reality in the meantime, these guidelines will apply to the usage of images containing text d image and text note the developer features to add text, background color, and accent bars through code are not available at the moment as of 15 5 (november 2024) release, but we are working hard on bringing this to reality in the meantime, these guidelines will apply to the usage of images containing text with branding note the developer features to add text, background color, and accent bars through code are not available at the moment as of 15 5 (november 2024) release, but we are working hard on bringing this to reality in the meantime, these guidelines will apply to the usage of images containing text branding types size usages a accent bar 2x32 height depends on the number of tabs when in need of branding colors to show on toolbox card accent bars can be applied to any toolbox card b background 44x24 similar to b image (wide) when accent bar is not satisfactory and branding colours need to be more prominent the height of the button and the spacing between icons, are intended to ensure consistency please do not override the system values when determining the branding colour, please take into account the system’s status indicators for selection highlight (#cadeed) lazy indicator (#808080) tab line (#e6e6e6) interaction state normal/hover/pressed selected background colour none background colour primary/p200 (#cadeed)