Components
Components
26 components, all using GloBird colours and type. Click through to see each one live in both light and dark mode.
- Accordionnavigation
A vertically stacked set of interactive headings that each reveal a section of content.
- Alertfeedback
Displays a callout for user attention.
- Alert Dialogoverlay
A modal dialog that interrupts the user with important content and expects a response.
- Aspect Ratiolayout
Displays content within a desired aspect ratio.
- Avatardisplay
An image element with a fallback for representing a user.
- Badgedisplay
Displays a small status descriptor.
- Breadcrumbnavigation
Displays the path to the current resource using a hierarchy of links.
- Buttonform
Displays a button or a component that looks like a button.
- Calendarform
A date field component that allows users to enter and edit date.
- Cardlayout
Displays a card with header, content, and footer.
- Carouseldisplay
A carousel with motion and swipe built using Embla.
- Checkboxform
A control that allows the user to toggle between checked and not checked.
- Dialogoverlay
A window overlaid on either the primary window or another dialog window.
- Inputform
Displays a form input field.
- Input OTPform
Accessible one-time password component with copy paste functionality.
- Labelform
Renders an accessible label associated with controls.
- Progressfeedback
Displays an indicator showing the completion progress of a task.
- Radio Groupform
A set of checkable buttons where only one can be checked at a time.
- Selectform
Displays a list of options for the user to pick from.
- Separatorlayout
Visually or semantically separates content.
- Skeletonfeedback
Use to show a placeholder while content is loading.
- Sliderform
An input where the user selects a value from within a given range.
- Switchform
A control that allows the user to toggle between checked and unchecked states.
- Tabsnavigation
A set of layered sections of content, also known as tab panels.
- Textareaform
Displays a form textarea or a component that looks like a textarea.
- Tooltipoverlay
A popup that displays information related to an element when it receives keyboard focus.