Title chips

Title chips provide a small snippet of information.

Design elements should be anchored to the bottom of the frame.

Principles

Contextual: The primary purpose of a Title Chip is to provide clear and immediate context for the content it's associated with.

Concise: Title Chips are designed for brief information, typically a short title, name, or status.

Visually Distinct: While sharing the Jetpack Compose Glimmer aesthetic, its appearance should be distinct enough to be recognized as a label rather than an interactive button.

Usage & Placement

The title chip is a read-only component, by default.

Do

Use a title chip for a static or decorative element, to inform the user and label.

Don't

Use title chips as a tapable action prompt, since they do not have a focus state, use a button instead.

Design elements should be anchored to the bottom of the frame. Title chips can be equivocated to a static mobile app bar.

Within a layout

The title chip is a read-only component, by default.

Chips scroll with the layout

Alternatively, chips can be fixed within the layout. The chip occupies the top 56 dp.

Anatomy

Design elements should be anchored to the bottom of the frame. Default title chip and Sticky title chip shown. Sticky title chips are displayed with an outline.