# Wave Design System Documentation

> Wave design system provides tools, components and guidance to ensure a unified, cohesive user experience across Volue's product landscape.

## Get started

- [Developing](/get-started/developing.md): Wave has everything you need to get started building web interfaces at Volue. Develop a consistent and accessible user interfaces much faster using a range of pre-built components.
- [Contributing to Wave](/get-started/contributing-to-wave.md): No description available
- [Composition](/get-started/composition.md): An overview of component composition patterns in Wave React.
- [AI Integration](/get-started/ai-integration.md): Bridging the gap between Wave and AI tools.
- [How to work with Figma?](/get-started/how-to-work-with-figma.md): This is a brief guide for developers about how to work with Figma.

## Tokens

- [Colors](/tokens/colors.md): By keeping the usage of colors systematic, we are distinguishing our brand and creating a consistent experience across products.
- [Typography](/tokens/typography.md): Typography can help create clear hierarchies, conveys the appropriate sentiment to assist our users through each stage of their journey.
- [Icons](/tokens/icons.md): Icons are essential to Volue's user interfaces. When used correctly, they communicate and help the users navigate, understand and utilize our solutions.
- [Elevation](/tokens/elevation.md): No description available
- [Spacing and size](/tokens/spacing-and-size.md): No description available
- [Breakpoints](/tokens/breakpoints.md): A named set of screen sizes that form the basis of responsive rules in Wave.

## Components

- [Box](/components/layout/box.md): Box is where it all starts.
- [Flex](/components/layout/flex.md): A layout primitive that aligns elements horizontally or vertically and injects white space between them.
- [Grid](/components/layout/grid.md): A primitive for creating fluid, nestable grid layouts.
- [Auto Grid](/components/layout/auto-grid.md): A grid layout that is responsive based on the size of its container and given constraints.
- [Switcher](/components/layout/switcher.md): A layout component that switches directly from laying out elements along one row to stacking them based on the container size.
- [Sidebar](/components/layout/sidebar.md): The sidebar layout wraps two adjacent elements, where one element takes up less horizontal space than its neighbor.
- [Anchor](/components/layout/anchor.md): A layout component used to position an element relative to the corner of another element.
- [Content Block](/components/layout/content-block.md): Provides a container that constrains the maximum width of the content it wraps.
- [Aspect Ratio](/components/layout/aspect-ratio.md): Displays content within a desired ratio.
- [Separator](/components/layout/separator.md): A divider used to provide visual separation of different content.
- [Form Field](/components/forms/form-field.md): Form Field exposes the elements around form inputs, and an API to compose them.
- [Text Input](/components/forms/text-input.md): Text inputs enable the user to interact with and input content and data.
- [Textarea](/components/forms/textarea.md): Textarea lets the user input plain-text on multiple lines.
- [Checkbox](/components/forms/checkbox.md): Checkbox is an input control that lets users select one or more options from a list of options.
- [Radio](/components/forms/radio.md): Radio is an input control that lets users select a single value from several options.
- [Select](/components/forms/select.md): Select is an input control that allows users to choose one option from a list.
- [Select Menu](/components/forms/select-menu/select-menu.md): Select Menu is a contextual overlay that displays a searchable options menu for the user to pick from.
- [Single Select Menu](/components/forms/select-menu/single-select-menu.md): Input control allowing for choosing single option from searchable options menu.
- [Multi Select Menu](/components/forms/select-menu/multi-select-menu.md): Input control allowing for choosing multiple options from searchable options menu.
- [Combobox](/components/forms/combobox.md): Combobox combines a text input with a list of options that users are able to choose from.
- [Date Picker](/components/forms/date-picker.md): Date Picker component enables users to enter a date either through text input or selecting a date from the Calendar dropdown.
- [Time Picker](/components/forms/time-picker.md): Time Picker component enables users to enter a time through text input or list of options from the dropdown menu.
- [Text](/components/typography/text.md): Text is a basic typography component for outputting any supported text style provided by our design tokens.
- [Heading](/components/typography/heading.md): Heading component is used to create various levels of typographic hierarchies.
- [Avatar](/components/avatar.md): Avatar is a visual representation of a user in the interface.
- [Action Bar](/components/action-bar.md): A responsive container for grouping a set of actions.
- [App Bar](/components/app-bar.md): The App Bar represents a meta-level navigation, that allows you to navigate accross different apps or modules.
- [App Frame](/components/app-frame.md): A foundational layout component that provides the structure for an application.
- [App Frame With Sidebar](/components/app-frame-with-sidebar.md): A foundational layout component that provides the structure for an application, serving as an alternative to the standard header-centric app frame.
- [App Header](/components/app-header.md): A consistently available top-level element of the application interface. It contains a brand logo, application title and app-wide utility actions.
- [Button](/components/button.md): A Button is a clickable element used to initialize an action.
- [Button Group](/components/button-group.md): Button groups are a collection of related buttons.
- [Calendar](/components/calendar.md): Calendar component enables users to view and select dates.
- [Card](/components/card.md): A Card is a styled container that groups related content and actions.
- [Collapsible Card](/components/collapsible-card.md): Component for collapsing and expanding sections of related content one at a time with card-like look.
- [Collapsible](/components/collapsible.md): An interactive component for collapsing and expanding sections of content.
- [Data Item](/components/data-item.md): Component for presenting single key-value pair.
- [Data List](/components/data-list.md): Component for organizing and displaying data as a list of key-value pairs.
- [Dialog](/components/dialog.md): Dialog displays content that requires user interaction, via a layer that sits on top of the page content.
- [Drawer](/components/drawer.md): A panel which slides in from the edge of the screen. Useful to focus the user's attention on a sub-task or sub-action of the parent view.
- [Hint Dot](/components/hint-dot.md): A decorative indicator to either call attention to an item or highlight it's status.
- [Keyboard Key](/components/kbd.md): The keyboard key component shows which key or combination of keys performs a given action.
- [Label](/components/label.md): Component for labelling content with certain keywords, showing unread content, highlighting new content and displaying status.
- [Link](/components/link.md): Link is mainly used as navigational element and usually appear within or directly following a paragraph or sentence.
- [Logo](/components/logo.md): Logo is a component for visual representation of the brand.
- [Menu](/components/menu.md): Component for displaying lists of links or actions that the user can take.
- [Nav Bar](/components/nav-bar.md): A responsive, horizontal navigation bar designed for primary app navigation.
- [Notification](/components/notification.md): Represents a highlighted message that calls out important information.
- [Pagination](/components/pagination.md): Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
- [Popover](/components/popover.md): The Popover component displays floating informative and actionable content in relation to a target.
- [Sidebar Navigation](/components/sidebar-navigation.md): A highly composable, hierarchical, vertical side navigation component.
- [Skeleton](/components/skeleton.md): Placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
- [Spinner](/components/spinner.md): A loading state for quick asynchronous tasks.
- [SVG Icon](/components/svg-icon.md): Icons provide visual context to represent actions. The Icon component is a helper wrapping SVG icons.
- [Switch](/components/switch.md): Switch represents a physical switch that allows users to turn things on or off, where choosing an option results in an action.
- [Table](/components/table.md): Table is a container for displaying information from a data set. It allows users to quickly scan, sort, compare, and take action on large amounts of data.
- [Tabs](/components/tabs.md): Tabs limit visible content by separating it into multiple panels. Only one panel is visible at a time, while all corresponding tabs are always visible — to switch from one panel to another, the corresponding tab has to be selected.
- [Toaster](/components/toaster.md): Toaster creates temporary, floating messages in the edges of the screen that communicate information to the user.
- [Tooltip](/components/tooltip.md): Tooltip is used to describe or add additional information to the user.
- [Tree View](/components/tree-view.md): A tree view is a hierarchical structure that provides nested levels of navigation.
- [Dismissable Layer](/components/utility/dismissable-layer.md): Lower level component for creating nested layers that can be dismissed one by one by user interactions.
- [Hidden](/components/utility/hidden.md): Utility component to responsively hide or show content.
- [Motion box](/components/utility/motion-box.md): Lower level component that wraps an actual Box component turning it into a motion component.
- [Portal](/components/utility/portal.md): Utility component to help with the React createPortal API.
- [Positioner](/components/utility/positioner.md): Utility component to help with positioning an element to an anchor.
- [Roving Focus Group](/components/utility/roving-focus-group.md): Utility component that implements the roving tabindex method to manage focus between items.
- [Slot](/components/utility/slot.md): Abstract component that merges its props onto its immediate child.
- [Visually Hidden](/components/utility/visually-hidden.md): Hide an element visually but keep it available for screen readers and other assistive technologies.

## UX patterns

- [App layouts](/UX-patterns/framework/app-layouts.md): App layouts describe the fundamental structure of an application. It defines the basic areas and explains roughly where which kind of content belongs.
- [Page layouts](/UX-patterns/framework/page-layouts.md): Page layouts describe the structure of a page. It defines how the content is positioned, sized and how to work with sections and different areas of content.
- [Navigation](/UX-patterns/framework/navigation.md): The navigation defines how the user accesses pages of content. So whenever you have an app that contains multiple pages you need to choose a suitable navigation.
- [Branding](/UX-patterns/style/branding.md): All Volue products must be designed to follow the volue look and feel as given by the wave design system components, tokens and patterns. In particular the volue logo can be considered as the major branding element.
- [Sizing](/UX-patterns/style/sizing.md): Wave supports two sizes: "medium" and "small". A project should be on one size and stick to that size in all integrated components.
- [Authentication](/UX-patterns/basic-user-interaction/authentication.md): Authentication is the process of verifying the identity and the permissions of a user. When this is successful it grants access to the application.
- [User Menu](/UX-patterns/basic-user-interaction/user-menu.md): The User Menu offers user-related functions including Login, Logout, Profile.
- [Settings](/UX-patterns/basic-user-interaction/settings.md): The settings let users change the functionality, behaviour and look of an application.
- [Forms](/UX-patterns/data-entry/forms.md): A form allows users to input, view, or edit data. Forms typically consist of inputfields such as text boxes, checkboxes, radio buttons, and dropdown menus, where users can enter or select information. Once the user submits the form, the data is processed and often stored, transmitted, or used to trigger specific actions in the system.
- [Input](/UX-patterns/data-entry/input.md): Input fields are what enable users input data in a form. Various types of fields exist to best gather the right data.
- [Selection](/UX-patterns/data-entry/selection.md): If the user has to make a selection, which often means to choose one or multiple options and switch settings on or off, you should offer them the right type of selection control.
- [Key indicators](/UX-patterns/data-visualization/key-indicators.md): With 'key indicators' we refer to a set of fundamental data for a page or object. Often this kind of data is key to identify or understand the content and therefor is placed near the heading.
- [Tables and lists](/UX-patterns/data-visualization/tables.md): A Table serves as a dynamic visual representation of information, enabling users to engage with, analyze, and make well-informed decisions based on the presented data.
- [Empty States](/UX-patterns/system-feedback/empty-states.md): Empty states are moments where there is nothing to display. This often occurs when you set up an app for the first time. Objects that can be empty are pages, cards, widgets, tables, lists, etc.
- [Loading](/UX-patterns/system-feedback/loading.md):  A loading state is fallback element that is shown immediately upon navigation. You can pre-render loading indicators such as skeletons and spinners. This helps users understand the app is responding.
- [Notification](/UX-patterns/system-feedback/notification.md): Use notifications to notify users about important events.
- [Status](/UX-patterns/system-feedback/status.md): The status is a permanently visible information about the general status of a system or an object. This is often crucial to the user to understand and predict the behaviour of the application.

## Misc

- [Accessibility](/accessibility.md): Designing an accessible product lets people of all abilities interact with, understand, and navigate it without facing any issues.
- [Wavify Guide](/wavify-guide.md): A slim styleguide, covering the key design specs of Wave
- [Releases](/releases.md): No description available