Skip to content

Option visualizer

Overview

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)