import { Meta } from "@storybook/blocks";

<Meta title="ADS/Docs/Lean guidelines" />

Lean guidelines

Components are the lego blocks that you get to build your system. Use these to compose higher order components and compose your UI. All our categories can be broadly grouped into 4 categories. Think about what is the purpose of your design before you get to selecting a component.

Displaying & organising information

• Text
• Tab
• Menu
• Tooltip
• Icon
• Avatar and avatar group
• Divider
• Callout (information kind)
• Spinner

Taking user input

Uses the UI category tokens of “input controls” to construct the atomic components in this category. Tokens start with ui.control.

• Input fields
• Switch
• Checkbox
• Segmented control
• Select
• Radio button
• Toggle button

Doing an action

Uses the UI category tokens of “action” to construct the atomic components. Tokens start with ui.action.

• Button and iconbutton
• Link
• Modal

Displaying the system's response

Uses the UI category tokens of “response” to construct the atomic components. Tokens start with ui.response.

• Callout (dismissable kinds)
• Toast