+ The List component displays a list of items in a structured and + accessible manner. Variants include simple lists, lists with icons, + lists with avatars, and lists with action buttons. +
+ +This is a basic list with plain text items.
+List items can be paired with icons to add visual cues.
+Use avatars for list items representing people or entities.
+Organize list items under different subheaders for better grouping.
+Lists can also have action buttons for added interactivity.
++ Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. +
+ ++ Lists can be used for various purposes, including displaying items, navigational menus, or highlighting features. The List component provides a flexible container for organizing related items in a vertical layout. It can be customized to display items with icons, buttons, avatars, and other interactive elements. This component is essential for organizing content in a structured, accessible format. +
+ + +Consistency
+Interactive Elements
+Accessibility
+1. Purpose & Context
+2. Spacing & Alignment
+3. Interactive Design
+4. Accessibility
+1. List
+2. List Item
+3. List Item Button
+4. List Item Icon
+5. List Item Avatar
+6. List Item Text
+7. List Subheader
++ A button is an interactive element that triggers a specific action, + takes users where they need to go, and points out what happens next in + a given flow. +
++ For proper application, these buttons can be used for different + purposes to enable easier and consistent combination when guiding + users across digital experiences. +
+ ++ The function of different buttons is what determines its usage and + how well suited it is to be applied in a given scenario to solve an + existing problem or complete a pending task. Functions or roles that + can be assigned to buttons in a particular design include: +
++ Primary buttons are used for the most important actions on a page. + It should be the key button that helps the user navigate in a given + flow or while trying to perform a specific action. This could apply + in cases like when the user needs to submit a from, proceed to a new + page, or complete an action. The filled button serves as the primary + button. +
++ This is also used for important actions on a page, however, they + mostly used as a supporting action for a primary button in order to + provide options for users to select from. For instance, if the + primary button offers the key action to be taken on a page, the + secondary button offers a way to postpone that action or chose + another which might either be of equal or lower importance than the + option which the primary button highlights. The outlined button + serves as the secondary button +
++ The tertiary button is used for subtle actions that do not have the + most prominence in a given array of options for users to select + from. They can stand alone or be paired with a primary button to + offer an option of much less importance than the key action intended + to be taken by the user. The text button serves as the tertiary + button. +
++ This button is used to point the user not necessarily in the + direction of their current flow, but possibly to an offering, + feature, or product that could be potentially useful in providing + much needed solutions that users desire which can be either new or + already existing ones. They usually stand out from the other button + categories so for easy identification and additional styling can be + added to them to achieve this necessary distinction. +
++ Danger buttons are used primarily to indicate crucial events. The + key role that they serve is to point out to the user that an + irreversible action is about to take place and as such confirmation + is required in order to proceed. +
++ While the styling of a button gives quick indicators as to how it is + to be used and what action it helps to complete, the key element + that helps to provide a complete scope of the purpose of a button is + the text label it contains. As such, button content should be + concise and have as much description as possible to inform users of + what the next step is. +
++ Different case styles can be applied to buttons to serve as readable + text that convey information. However, a rule of thumb is that all + buttons follow one specific case style to enhance consistency and + reduce distractions for the user. For all of our buttons, title case + has been used as text labels. +
++ Font weight can be used to good effect to provide proper emphasis to + buttons as they convey the needed information. Chosen fonts should + be legible with clear and readable characters that do not distract + or cause difficulty while being read. Proper exploration should be + carried out with the intended typeface to ensure it passes muster + before proceeding to use it across all buttons. +
++ Characters in a button should not be full sentences. Instead, words + or phrases that summarize the purpose of a button could suffice. + Total text in a button is recommended to be an average of 20 + characters long, The language used in buttons should also be + consistent. For instance, if a button has a text label of 'Create + Design', this convention should be maintained and not changed to + something like 'New Design' later on. +
++ Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. +
+The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.
++ The List component is designed to: +
++ Components Overview: +
+ +The base container for organizing related content in vertical layouts.
+Basic Usage:
++ Represents an individual entry in a list. Includes primary and optional secondary text. +
++ Adds interactivity to list items, making them actionable. +
++ Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context. +
++ Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface. +
++ Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization. +
+