📄️ Alert bar
An alert bar communicates something to the user by showing a prominent, floating bar at the bottom of the screen, using one of several styles each indicating a different purpose.
📄️ User Avatar
A User Avatar is a visual icon that represents a user.
📄️ Button
Buttons are used to trigger actions. There are different button variants that are used for different types of actions.
📄️ Calendar Input
Calendar Input
📄️ Calendar
The Calendar is a component to display a calendar to pick a day in multiple calendar systems, such as: Gregorian, Ethiopic, Nepali and many other calendrical systems.
📄️ Card
A card is a container element used to group together and separate blocks of content.
📄️ Checkbox
Checkboxes are used to choose one or more items from a list. A checkbox can also be used to toggle an option.
📄️ Chip
Chips are used to select from a set of defined options. Chips can also represent a set of chosen options.
📄️ Data table
A data table is used to display and allow interaction with data in a structured way.
📄️ Elevation
Elevation is used to create and communicate depth in an interface.
📄️ File input
A file input is used to choose and upload files.
📄️ Input
An input is used to enter data, like text or a number.
📄️ Loader
Loaders are used to show that something is in progress. They keep users informed about the what's going on.
📄️ Menu
A menu gives access to menu items, through a panel that opens from a trigger element. Menu items usually trigger actions.
📄️ Modal
A modal shows content on a layer on top of page, interrupting a workflow and focusing a user's attention on the modal contents.
📄️ Notice box
A notice box shows important information about a situation.
📄️ Organisation unit tree
This component is under development. Advanced functionality is planned. Basic functionality, outlined below, is available now.
📄️ Pagination
Pagination is used to navigate content across several pages.
📄️ Popover
A popover is used to show more information when a user interacts with a trigger element.
📄️ Radio
Radio inputs are used to choose one item from a list.
📄️ Segmented control
A segmented control is used to choose between related options that have an effect on a related area.
📄️ Select
Selects are used to choose one or more items from a list of options.
📄️ Switch
Switches are used to toggle something between an on and off state.
📄️ Tabs
Tabs are used to navigate between different views within the same page or context.
📄️ Tag
Tags are used to label items by a set of shared properties, like category or status.
📄️ Tooltip
A tooltip is used to show contextual information when triggered by clicking, focusing, or hovering an element.
📄️ Transfer
A transfer is used to make complex selections from a list of options.