OLYSENSE Components are reusable, interactive building blocks for designing consistent user interfaces. They include elements for actions, containment, communication, navigation, selection, and text input, ensuring a cohesive and accessible design across applications. Each component is designed to be flexible and can be seamlessly integrated into various projects to enhance functionality and user experience.
Alerts are used to display important messages inline or as toast notifications.
Badges are used to draw attention and display statuses or counts.
Breadcrumb Items are used inside breadcrumbs to represent different links.
Breadcrumbs provide a group of links so users can easily navigate a website’s hierarchy.
Button groups can be used to group related buttons into sections.
Buttons are used for interface actions. Primary style should be used only once per section for main call-to-action, while other styles can appear more frequently.
The Calendar component allows users to select a date from a calendar interface.
Cards can be used to group related subjects in a container.
Checkboxes allow the user to toggle an option on or off.
The Command is a fast, composable, command menu for React.
The Date Picker component provides a date input field with an integrated calendar picker.
Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate attention.
Dividers are used to visually separate or group elements.
Drawers slide in from a container to expose additional options and information.
Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
Icons are symbols that can be used to represent various options within an application. Icon component allows you to display an icon from the OLYSENSE Icon library.
Inputs collect data from the user.
Menu Header provide header content that is placed at the top of a Menu.
Menus provide a list of options for the user to choose from.
Menu labels are used to describe a group of menu items.
Menus provide a list of options for the user to choose from.
Options define the selectable items within various form controls such as select.
Progress bars are used to show the status of an ongoing operation.
Progress rings are used to show the progress of a determinate operation in a circular fashion.
Radio groups are used to group multiple radios or radio buttons so they function as a single form control.
Radios allow the user to select a single option from a group.
Ranges allow the user to select a single value within a given range using a slider.
Segmented Group is used to group multiple Segmented Items, where only one can be selected at a time..
Segmented items allow the user to select a single option from a group using a button-like control.
Selects allow you to choose items from a menu of predefined options.
Side Nav Menu Group Item's are used to render navigation menu items in Side Nav Menu Groups.
Use to render a group of Side Nav Menu Items.
Side Nav Menu Item's are used to render navigation menu options.
Use the Side Nav Menu Section Label to render label that identifies a group of similar navigation items.
Use Side Nav Menu to render a list of Side Nav Menu Items.
Use Side Nav to render navigation items.
Skeletons are used to provide a visual representation of where content will eventually be drawn.
Spinners are used to show the progress of an indeterminate operation.
Switches allow the user to toggle an option on or off.
Tab groups organize content into a container that shows one section at a time.
Tab panels are used inside tab groups to display tabbed content.
Tabs are used inside tab groups to represent and activate tab panels.
Represents tabular data presented in a two-dimensional format comprised of rows and columns of cells. Table should not be confused with a DataGrid, which has more advanced functionality.
Tags are used as labels to organize things or to indicate a selection.
Textareas collect data from the user and allow multiple lines of text.
Tooltips display additional information based on a specific action.
The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.