UI Components
chevron down
 

UI Components

Overview

This section covers our standard UI components, pre-built elements that you can use, combine, or customize. Reuse our UI components to simplify development and help your app feel familiar for users. All of these components are available in a Sketch file in Downloads.

Mixed Text

This component shows how to configure a header with text in all possible layouts and is the basis for all components that use typography. Most components in our system use the Center-Middle or Left configurations, but you can choose the layout that is best for your app. Mixed text dynamically handles the layout, spacing, wrapping, and overflow of your copy.

Development Details

Details

Header

  • Font: Medium header
  • Color: Primary color

Text

  • Font: Medium copy
  • Color: White

Mixed Text

Stats

We use two layouts to display statistics during an activity, such as exercise. While we don't provide this component in our SDK, we suggest using the following guidelines to create it. (show example: exercise for med and lrg, call out items)

Stat Example

Large Stat

Large stats show a user's progress in an activity. This glanceable component is designed to fit 5 full-size characters. The vertical text position should be fixed in the middle of the screen, but horizontal alignment is flexible. This pattern can be paired with the medium stat on the top or bottom of the screen.

Details

Large Value

  • Font: Large number, use overflow guidance at 6+ characters
  • Color: Primary color or custom

Tenths

  • Font: Medium Number
  • Color: Same as Large Value

Units

  • Font: Large header
  • Color: Same as large value
Recommendations
  • Consider how glanceable data is for a user while in motion.
  • Reserve these for numeric data.

Medium Stat

Medium stats show a live stat, viewable while in motion. These stats are fixed at the top or bottom of the screen and are best for showing live data, like current heart rate or a countdown timer.

Details

Stat Value

  • Font: Medium number
  • Color: White, or custom

Stat Unit

  • Font: Large header
  • Color: Same as stat value

Buttons

Square Buttons

Square buttons are traditional buttons that respond to screen taps. Use semantic colors where possible and short words that fit in buttons. Overflowing text will shrink and then truncate.

Development Details

Details
  • Font: Medium header
  • Font Alignment: Center middle
  • Height: 60px minimum
  • Haptic: Confirmation on tap
  • [Optional] Icon Size: 32x32px.

Full-Width

Use full-width buttons for single actions like, "Done", "Shuffle", or "+ Alarm".

Details

Size

  • Width: Full-screen, respecting device margin

Normal State

  • Color: Primary color
  • Stroke: 2px

Active State

  • Color: Same as Normal State
  • Behavior: Fill button with color

Half-Width

Use half-width buttons for choices, like "Yes" or "No".

Details

Size

  • Width: 174px each

Normal State

  • Primary Button:
    • Color: Primary color
    • Stroke: 2px
  • Secondary Button:
    • Color: Light Grey
    • Stroke: 2px

Active State

  • Color: Same as Normal State
  • Behavior: Fill button with color

Toggle

Use a toggle for either/or selections, like "On" or "Off". There are three states: active, pressed, and inactive.

Details

Size

  • Same as half-width

Active and Pressed states

  • Color: Whichever semantic color makes sense for your option, or primary color
  • Behavior: Fill selected button with color

Inactive state

  • Color: Light grey
  • Stroke: 2px

Combo Buttons

Combo buttons are circular buttons that sit in a corner of the screen and control activity sessions. When in the right-hand corners, combo buttons are controlled by both screen taps and the corresponding hard buttons. For water-based activities, turn off the interface buttons and use hard buttons only. Consider how the actions your buttons control will change during use.

Primary actions go on the bottom right corner and are the only button with a visible ring to call attention to use. Secondary actions go in the upper right corner. The left corner can be used for tertiary actions, like settings. The left two interface buttons do not correspond with hardware buttons and should be used sparingly.

Combo Button Example

Development Details

Download Combo Button Icons

Details

Default State

  • Icon:
    • Size: 40x40px
    • Stroke: 2px
  • Color: Primary color or semantic
  • Background Circle:
    • Color: None
  • Primary Button Ring:
    • Size: 60x60px
    • Stroke: 2px
    • Color: Same as icon

Hardware Key Enabled

  • Size: 6x6px dot
  • Placement: Centered, near hardware button

Pressed State

  • Icon Color: Filled black
  • Background Circle:
    • Color: Filled icon color
    • Size: 60x60px

Format

  • .png

Haptic

  • Confirmation on tap

Tumbler

Tumblers are used to choose letters and numbers for a user's input, like in a countdown timer or alarm. Tumblers are aligned to the left screen edge by default, and the position of the active number is fixed in the middle. Multiple tumblers can used together. For example, hours tumbler and minutes tumblers. Users can see the inactive values above and below the active number.

Details

Active Value

  • Font: Large number
  • Color: Primary color

Inactive Value

  • Font: Same as active value
  • Color: White, 31% opacity

Label

  • Font: Medium header
  • Color: Same as active value

Leading 0s

  • Font: Same as active value
  • Color: Dark Grey

Haptics:

  • Bump on swipe with velocity
Recommendation
  • Abbreviate your Labels ("m", "s", "cals").

Action Dialog

Action dialogs provide focused information for a user to take action. While this component isn't in our, SDK, you can create it using mixed text and square buttons. You can provide a user with 1 or 2 options, using one full-width or two half-width square buttons.

Details

Font

Color

  • Header: Primary color or white
  • Copy: White
  • Full-width/primary-half Width button: Primary color
  • Secondary button: White
Recommendations
  • Use sparingly.
  • Reserve for scenarios where users need to make important, irreversible confirmations.

Panorama

The panorama component shows data on different screens that a user can swipe through horizontally.

Details
  • Font: Medium header
  • Color: White or custom

Pagination Indicator

The pagination indicator signifies the presence and position of horizontal screens. The widget shows the position per screen, with the current screen position highlighted. These can be positioned at the top or bottom of the screen.

Marquee

Use the marquee component for dynamic content that's expected to regularly overflow its bounds. We use this component exclusively for song titles in our media player and recommend limiting its use. The marquee should scroll across the whole screen and shouldn't be used on screens the users swipes horizontally.

Scrollview

The scrollview component is a free-form container used to display text that must scroll vertically, like an article. You can include any other components in this container. Use for content that expands beyond the height of the screen.

Development Details

Scrollview Headers

To separate scrollview sections, use a scrollview header component which optionally snaps to the top of the screen. After a user scrolls through all items in a section, the next header snaps to the top of the screen.

Details

Header

  • Font: Medium copy bold
  • Color: White
  • Alignment: Top

Header Container

  • Width: Screen-width
  • Height: 55px
  • Color: Primary color at 50% on black background

Tile Lists

Tile lists are scrollable containers comprised of tiles, which are stackable repeating components. While scrollviews are free-form, tile lists must use repeating tiles of the same type. Different types of tiles are available in Fitbit OS, or you can create custom tiles.

Tiles never grow beyond the height of the screen and you can allow the user to reorder them. Tile lists may contain headers and footer tiles that differ from the repeating tiles and can be made from other components. For example a Tumbler can become a header tile and a Button can become a footer tile. Space separators or line separators may be used in between tiles.

Tile Lists

Details

Line separators

  • Size: Length of screen
  • Stroke: 2px
  • Color: Extra dark grey

Tiles

  • Width: Screen width
  • Max height: Smaller than screen height
  • Background Press Color: Slate press

Basic Tiles

Basic tiles are the basis for all text-based tiles. This component handles text layout, wrapping, and expansion using system fonts. Basic tiles respect the same typography and spacing conventions used in the mixed text component. All basic tiles can be interactive and expand in height up to 124px, with the exception of tiny tiles.

Use basic tiles as a foundation for any custom tiles you create.

Details

Small

  • Recommended use: Single line headers
  • Minimum Height: 88px

Junior

  • Recommended use: Single line headers that need a little more height than Small.
  • Minimum Height: 100px

Medium

  • Recommended use: Best size for fitting two tiles on a screen
  • Minimum Height: 124px

Tiny

  • Recommended use: Summary list items
  • Fixed Height: 46px
  • Font Size: Medium Copy
  • Rules:
    • Single line of text
    • Not interactive
    • No separators

Text Toggle Tile

A text toggle is a tile in a list that cycles through options. A standard application for this type of tile is within a settings list. Text toggle tiles must have a title and a list of options.

Details

Basic Tile Type

  • Medium

Header

  • Font: Medium header or medium copy
  • Alignment: Left
  • Font Color: White

Text Toggle

  • Font: Medium copy
  • Alignment: Right
  • Font Color: Primary color

Separator

  • Line separators required
Recommendations
  • Reserve use for app settings.
  • Keep the number of toggleable options limited.

Checkbox Tile

A checkbox tile in a list toggles between a selected and unselected state. Checkbox tiles are used for a list of options, where multiple items can be selected.

Details

Basic Tile Type

  • Small

Header

  • Font: Medium header
  • Alignment: Left
  • Font Color: White

Toggle Icon

  • Asset: 40x40px
  • Color "Off": White, 63% opacity
  • Color "On": Primary color

Checkbox Icon

Separator = Line Separator Required