BottomBar

stablev1.0.0

Liquid-glass bottom navigation from Figma SCDC node 24:10133. Retail, PvB, and SME tab sets.

Live preview

Red dot

Implementation

import { BottomBar } from '@nitro-core/ui';

<BottomBar
  product="retail"
  active="home"
/>

Property names stay aligned so a Figma Button maps onto the production import below.

Figma

24:10133

Code

@nitro-core/ui

Active

Figma Variable

core/affluent/blue #044385

Nitro Token

color.nav.active

CSS

--nitro-color-nav-active

Chain

Figma → Token → CSS → Component

Inactive

Figma Variable

core/grey/900 #191919

Nitro Token

color.nav.inactive

CSS

--nitro-color-nav-inactive

Chain

Figma → Token → CSS → Component