Θ ABC - Pieces

App Bar Control (ABC)

Collection: The individual actionable buttons, icons, and text that are grouped together in sections (ABC Leading, Center, Trailing) for use within the App Bar.

Styleguide Link

Properties

Type

All of the options available for use in the App Bar are collected here.

  • Icon - The default for most controls in the app bar, the display of an icon that serves as a metaphor for an activity.

  • Text - Used interchanabily with icons to spell out the action being preformed when the control is interacted with.

  • Button - To provide a little more visibility to th action we can use buttons in the app bar with text and/or icons.

  • Avatar - When we'd like to use an avatar instead of an icon. This is commonly used for a users profile or settings area navigation.

  • Logo - This can be a logo for branding purposes or an illustration.

  • Wordmark - A little larger space for a graphic or illustration to exist.

  • Title - Used to provide content to the current screen or to inform of an action that is being taken on the screens contents.

  • Toggle - Used as a filter or as an alternative to tabs.

  • Input - Most often used as a search field but it could take on other text input concepts.

  • Tab Bar - A horizontally scrollable tab bar for navigating to the primary sections of the application.

  • NavToggle - An expandable grouping or single toggle button that has the primary purpose of navigating back in the history stack, with a secondary action to expand-and-reveal additional tools available in the newly revealed toggle buttons.

Last updated