iOS component overview

Avatar is used to represent a user.

AvatarGroup is used to both display a group of user avatars and, optionally, control actions related to the users group.

Badge is a label that indicates status or importance.

Buttons allow users to perform actions within a surface.

ButtonGroup is used to display a series of buttons.

The ButtonToggle is a larger alternative to selection components such as Checkbox, RadioButton, and Switch.

Card is a semi-modular container used to house Card.Header and a variant of the available preview blocks.

Checkbox is used for multiple choice selection.

Icons are the symbolic representation of an action or information, providing visual context and improving usability.

IconButton allows users to take actions and make choices with a single click or tap.

IconButtonFloating provides an action that floats over the content and remains in place when scrolled.

ListAction is a continuous vertical group of list items that can include text, icons, images and actions.

SearchField allows users to search for free-form content.

SearchGuide appends and refines a search query.

Sheets are bottom-anchored overlays that that allow the user to easily return to the previous screen. They are meant for temporary focused tasks. Sheets are the mobile equivalent of the modal or overlay on web.

Switch is used for single cell options that can be turned on and off only.

Tabs may be used navigate between multiple URLs.

Text component is used for all representations of text on a surface. Text is based on iOS typography guidelines.

TextArea allows for multi-line input.

TextField allows for multiple types of text input.

Toasts educate users on the content of the screen, provide confirmation when people complete an action, or simply communicate a short message.