Skip to main content

Components

YDS provides UI components for web and mobile use.

Form controls​

Components for data entry, selection, and supporting form structures.

Lets users select one or more options.

Checkbox wrapped in a card for answer selection.

Radio button wrapped in a card for answers.

Lets users select one option from a set.

Predefined list for single selection in forms.

0100

Lets users pick a numeric value from a range.

Multi-line input for longer free-form responses.

Single-line field for short structured information.

Components for moving through content, switching views, and finding destinations.

Filters results in real-time as the user types.

Switches between pages or top-level views.

Lets users find content by entering keywords.

...

Switches between content sections within the same page.

Styled anchor with optional external link icon.

Indicators & Metadata​

Components for displaying status, categorisation, and supporting information in the interface.

Dot-style indicators for current position in a set.

Tag

Displays a short keyword or status label.

Interactive keyword link for navigational context.

Feedback & Status​

Components for communicating feedback, notifications, and system status to the user.

3

Indicates notifications, item counts, or contextual information.

BannerNotification

Displays important temporary messages affecting the entire view.

Notification

Highlights success, warning, error, or info messages.

Indicates task completion in determinate and indeterminate states.

Indicates an ongoing process while content loads.

TagFilter

Indicates active filters and allows their removal.

Short-lived floating message confirming an action.

Buttons & Actions​

Components for triggering actions and making choices.

Button that opens a dropdown list of actions.

Triggers an action or confirms a choice.

Groups buttons for selections, filters, or view toggles.

Selects a value from a list immediately.

Groups multiple dropdown menus into one control area.

Positioned dropdown with keyboard navigation and focus management.

Toggles between two states, applied immediately.

Content display​

Components for presenting, structuring, and highlighting content.

Hides and reveals sections of related content.

Panel that slides up from the bottom.

Consistent layout for content inside Modal or BottomSheet.

Centered overlay that blocks interaction until dismissed.

For installation and quickstart​