Θ 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 Linkarrow-up-right

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