hsds_mobile

Flutter component library for the Headspace Design System.

Installation

dependencies:
  hsds_mobile: ^0.1.0

Components

HsdsBottomNav

Persistent tab bar for primary app navigation. Supports 3–5 labelled items with active/inactive states and an iOS home indicator.

import 'package:hsds_mobile/hsds_mobile.dart';

HsdsBottomNav(
  items: [
    HsdsBottomNavItem(
      label: 'Today',
      icon: HsdsBottomNavIcons.today.inactive,
      activeIcon: HsdsBottomNavIcons.today.active,
    ),
    HsdsBottomNavItem(
      label: 'Explore',
      icon: HsdsBottomNavIcons.explore.inactive,
      activeIcon: HsdsBottomNavIcons.explore.active,
    ),
    HsdsBottomNavItem(
      label: 'Profile',
      icon: HsdsBottomNavIcons.profile.inactive,
      activeIcon: HsdsBottomNavIcons.profile.active,
    ),
  ],
  selectedIndex: _selectedIndex,
  onTabSelected: (i) => setState(() => _selectedIndex = i),
)

Props

Prop Type Default Description
items List<HsdsBottomNavItem> required 3–5 tab items
selectedIndex int required Index of the active tab
onTabSelected ValueChanged<int> required Called when a tab is tapped
showHomeIndicator bool true Show iOS home indicator bar

Available icons: HsdsBottomNavIcons.today, .explore, .profile, .care, .ebb — each with .active and .inactive getters.

Tokens

Design tokens are available as constants:

HsdsColors.foregroundForeground       // #2D2C2B
HsdsColors.foregroundForegroundWeaker // #63605D
HsdsColors.surfaceSurface             // #FFFFFF
HsdsSpacing.small3X                   // 2dp
HsdsSpacing.large9X                   // 120dp (tablet inset)

Documentation

Full documentation at hsds.design/components/bottom-nav.

Libraries

hsds_mobile