Skip to content

Option Visualizer

Visualize your options in the table view:
  • Text (with/without badge)
  • Icon and text (with/without badge)
  • Icon (with/without badge)
  • Colored dot and text (with/without badge)
  • Colored dot (with/without badge)
Viualize your options on the card view:
  • Text
  • Icon and text
  • Icon
  • Colored dot and text
  • Colored dot

Examples (Card)

Using icon

icon and value
Icon & Text
icon and value (badged)
Icon only

Colored dot

icon and value
Colored dot & Text
icon and value (badged)
Colored dot only

Examples (Table)

Text

icon and value
Text
icon and value (badged)
Text (badged)

Icon & text

icon and value
Icon & Text
icon and value (badged)
Icon & Text (badged)

Colored dot & text

icon and value
Colored dot & Text
icon and value (badged)
Colored dot & Text (badged)

Icon only

icon and value
Icon only
icon and value (badged)
Icon only (badged)

Colored dot only

icon and value
Colored dot only
icon and value (badged)
Colored dot only (badged)
Back to top