Classes

ZetaAccordion Components

The accordion is a control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.

ZetaAssistChip Components

Leading widget should typically be an icon.

ZetaAvatar Components

An avatar is a visual representation of a user or entity.

ZetaBanner Components

A banner displays an important, succinct message, and provides action for users to address. It draws the attention to the message by displaying it at the top in various colors.

ZetaBottomSheet Components

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.

ZetaBreadCrumbs Components

The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.

ZetaButton Components

Zeta Button

ZetaButtonGroup Components

Zeta Button Group

ZetaChatItem Components

Chat item widget that can be dragged to reveal contextual actions.

ZetaCheckbox Components

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

ZetaCommsButton Components

Comms button component. This component is used to display a button for communication action. Answer, reject, mute, hold, speaker, etc.

ZetaContactItem Components

A single row that contains avatar, title and subtitle.

ZetaDateInput Components

A form field used to input dates.

ZetaDialPad Components

Dial pad gives the user the ability to dial a number and start a call. It also has a quick dial security action and a delete entry action.

ZetaDropdown<T> Components

Class for ZetaDropdown

ZetaDropdownItem<T> Components

An item used in a ZetaDropdown or a ZetaSelectInput.

ZetaDropdownListItem Components

An expandable list item containing other ZetaListItems within it.

ZetaFAB Components

Zeta Floating Action Button Component.

ZetaFilterChip Components

Filter chips have 2 togglable states, representing selected and not selected.

ZetaFilterSelection Components

Component ZetaFilterSelection

ZetaGlobalHeader Components

Global header component

ZetaGlobalHeaderItem Components

Tab item to be used in ZetaGlobalHeader.

ZetaIcon Components

Custom wrapper for Icon that applies the Zeta icon family.

ZetaIconButton Components

Component ZetaIconButton

ZetaIndicator Components

Indicators are used to show the status of a user or any messages/notifications they might have.

ZetaInPageBanner Components

In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen,below a top app bar. Only one banner should be shown at a time.

ZetaInputChip Components

Zeta Input Chip typically is used to associate some content or action with a user.

ZetaLabel Components

Text badges notify users of line items that need attention.

ZetaList Components

Used to apply dividers to a group of ZetaListItems.

ZetaListItem Components

A single row that typically contains some text as well as a leading or trailing widgets.

ZetaMenuItem Components

Menu Item component, typically used as body of ZetaBottomSheet.

ZetaNavigationBar Components

Navigation Bars (Bottom navigation) allow movement between primary destinations in an app.

ZetaNavigationRail Components

This widget provides a navigation rail for navigating between different sections of an app. It is designed to be used as a side navigation menu and can be customized with different icons and labels for each navigation item. Should be used with ZetaNavigationRailItem.

ZetaNotificationListItem Components

Notification list items are used in notification lists.

ZetaPagination Components

Pagination is used to switch between pages.

ZetaPasswordInput Components

Zeta Password Input

ZetaPhoneInput Components

ZetaPhoneInput allows entering phone numbers.

ZetaPriorityPill Components

This badge is used to indicate the order of importance.

ZetaProgressBar Components

Progress indicators express an unspecified wait time or display the length of a process.

ZetaProgressCircle Components

Progress indicators express an unspecified wait time or display the length of a process.

ZetaRadio<T> Components

Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.

ZetaScreenHeaderBar Components

ZetaScreenHeaderBar

ZetaSearchBar Components

ZetaSearchBar provides input field for searching.

ZetaSegmentedControl<T> Components

A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Like buttons, segments can contain text or images. Segmented controls are often used to display different views.

ZetaSelectInput<T> Components

Class for ZetaSelectInput.

ZetaSlider Components

Slider component with customized styling.

ZetaSnackBar Components

A lightweight message with an optional action which briefly displays at the bottom of the screen.

ZetaStatusLabel Components

To help some information, labels, or errors stand out, we present them with badges. They can look like buttons, but users can’t select them. They just guide users to things they should pay attention to.

ZetaStepper Components

Zeta stepper widget that displays progress through a sequence of steps. Steppers are particularly useful in the case of forms where one step requires the completion of another one, or where multiple steps need to be completed in order to submit the whole form.

ZetaStepperInput Components

A stepper input, also called numeric stepper, is a common UI element that allows users to input a number or value simply by clicking the plus and minus buttons.

ZetaSwitch Components

Zeta Switch.

ZetaTab Components

Defines how the bounds of the selected tab indicator are computed. Intended to be used with ZetaTabBar.

ZetaTabBar Components

A Zeta Design primary tab bar.

ZetaTag Components

Tags are used to draw attention to a specific area or information. The arrow shape helps direct the users attention to the desired place.

ZetaTextInput Components

Text inputs allow the user to enter text.

ZetaTimeInput Components

A form field used to input time.

ZetaTooltip Components

Tooltips display informative text when users hover over, focus on, or tap an element.

ZetaTopAppBar Components

Top app bars provide content and actions related to the current screen.