Skip to main content
  • Service design
  • Fluid Design System
  • Experience index
  • Resources
    • Figma
    • UX principles
    • Introduction
    • Angular
    • React
    • VueJs
    • Vanilla JS
    • Fluid Tokens
    • Fluid 4 deprecated
    • Dark Mode
  • Overview
  • Gradient Ray
  • Imagery
  • Logo
  • Pictograms
  • Vectors
  • Overview
  • Accessibility
  • Colors
  • Elevation
  • Iconography
  • Spacing
  • Typography
  • Roadmap
  • Whats new
Migrate v4 to v5

Design Tokens
  • Getting Started
  • Area charts
  • Bar charts
  • Line charts
  • Pie charts
  • Charts resources
  • Overview
  • Components status
  • Alert
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Card
  • Checkbox
  • Collapse
  • Dropdown
  • FAB
  • Footer
  • Form
  • Grid
  • Header
  • Icon
  • Icon button
  • Inline message
  • Input
  • Layout
  • Link
  • List
  • Modal
  • Navbar
  • Pagination
  • Progress
  • Radio button
  • Segmented control
  • Select
  • Sidebar
  • Slider
  • Spinner
  • Stamp
  • Status-indicator
  • Switch
  • Table
  • Tabs
  • Tag
  • Toast
  • Toggle
  • Tooltip
  • Borders
  • Clearfix
  • Colors
  • Display
  • Embed
  • Flex
  • Float
  • Image replacement
  • Overflow
  • Position
  • Screenreaders
  • Sizing
  • Shadows
  • Stretched link
  • Text
  • Vertical align
  • Visibility
Templates
Layouts
Support

Use the UP/DOWN arrows to navigate through the suggestion list. Press Enter to select an option. On touchscreen terminals, use swipe to navigate and double tap to select an option

keyboard_arrow_down
Link to Fluid's Microsoft Teams channel help Link to the support page

Overview

All Fluid Design System components at a glance!

Autocomplete Autocomplete
Avatar Avatar
Badge Badge
Breadcrumb Breadcrumb
Button Button
Card Card
Checkbox Checkbox
Collapse Collapse
Dropdown Dropdown
FAB FAB
Footer Footer
Form Form
Grid Grid
Header Header
Icon Icon
Icon button Icon button
Inline message Inline message
Input Input
Layout Layout
Link Link
List List
Modal Modal
Navbar Navbar
Pagination Pagination
Progress Progress
Radio button Radio button
Segmented control Segmented control
Select Select
Sidebar Sidebar
Slider Slider
Spinner Spinner
Stamp Stamp
Status-indicator Status-indicator
Table Table
Tabs Tabs
Tag Tag
Toast Toast
Toggle Toggle
Tooltip Tooltip