Components

A Divider creates separations in content. Dividers can help organize content and establish visual rhythm.

This is a separate primitive from Text for semantic purposes. The Heading primitive maps to an <h*> tag, and Text maps to a <p> tag.

The icon component displays simple vector graphics for use in other components like Buttons.

The Image primitive can be used to display responsive images.

ScrollView is essentially a View that allows scrolling of its inner contents.

The Text primitive is used to display simple strings of text in an interface.

View is the foundational component for Amplify UI primitives. While View renders a <div> by default, it can render any HTML element and supports styling via props.

An Alert displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. Alerts are typically intended to be read out dynamically by a screen reader.

Loaders provide a visual cue that an action is either processing or awaiting a result. They are used to help the customer understand the system is working to fulfill a request.

A Message can be used to display feedback to the user.

The Placeholder component is used to fill out the interface while content is loaded asynchronously.

The breadcrumbs component is a navigation list used to visualize the information architecture of a website and the user's current place in the hierarchy.

Links are customizable and themeable elements used for Navigation. By default Links render an anchor tag but can be configured to be used with routing libraries.

Menu provides an accessible, interactive menu for selecting actions within an application. Dropdown menu is collision-aware and will automatically change location based on available space.

Tabs organize content into multiple sections and allow users to navigate between them.

Autocomplete is a SearchField enhanced by a list of suggested options.

The Button primitive is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

CheckboxField is used to mark an individual item as selected, or to select multiple items from a list of individual items.

The Dropzone component captures files from user with drag and drop

Fieldsets are used to group related form fields.

Input primitive allows creating interactive form controls

Label primitive enables captioning a user interface item

PasswordField allows users to input passwords, featuring full password manager support and an optional show/hide password button for user convenience - Amplify UI

The PhoneNumberField form primitive allows users to input a phone number

A RadioGroupField allows users to select a single option from a list of mutually exclusive options.

SearchField accepts query text for search.

The SelectField primitive allows you to create a drop-down list.

Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.

A StepperField is a number input with buttons to increase or decrease the value.

The SwitchField form primitive is a toggleable input type with a checked (on) and unchecked (off) state.

The TextField form primitive allows users to input text content.

The TextAreaField form primitive can be used allow users to input multiline text content.

A toggle button represents an on/off state for some configuration, for example switching on/off bold text in a text editor.

The Accordion primitive enables users to expand or collapse a set of sections.

The Card component can be used to group related pieces of content.

A Collection wraps Flex and Grid components, and provides a way to display items in a collection from a data source.

A layout container using Flexbox.

A layout container using CSS Grid

Pagination provides navigation to allow customers to move between large sets of content that are distributed across multiple pages.

The Table primitive provides users with a styled and customizable table element.

An Avatar represents a user by displaying a profile image, initials, or a fallback icon.

A Badge is a small visual element to denote a status or message about an item. A small, color-coded visual element that contains letters or numbers, that you can use to label, categorize, or organize items.

The Rating component displays a read-only star rating of a product or service.

HighlightMatch is used to highlight a substring of a text.

The Visually Hidden component is used to visually hide content while leaving it available to screen readers.