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.

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.

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.

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.