No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Dot

usage
import { Dot } from "@sharegate/orbit-ui";
sources
Github

Usage

Default

A default dot.

Editable example

Label

A dot can have a label.

Habitable
Editable example

Color

A dot color can vary.

You can use a color name from our Orbit design system (e.g. alias-2, --o-ui-accent-6), an hexadecimal color code (e.g. #c5cac8), an hsl, an hsla, a rgb or a rgba color code.

HabitableUninhabitableClean
Editable example

API

Dot

usage
import { Dot } from "@sharegate/orbit-ui";
NameDescriptionDefault
color
The dot color.
"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | string & {} | "alias-body" | "alias-surface" | "alias-soft-break" | "alias-hard-break" | "alias-mid-break" | "alias-basic" | "alias-basic-hover" | "alias-basic-active" | "alias-basic-transparent" | "alias-basic-transparent-hover" | "alias-basic-transparent-active" | "alias-static-white" | "alias-grey-hover" | "alias-grey-active" | "alias-accent" | "alias-accent-hover" | "alias-accent-active" | "alias-accent-faint" | "alias-accent-light" | "alias-accent-transparent" | "alias-accent-transparent-hover" | "alias-accent-transparent-active" | "alias-alert" | "alias-alert-hover" | "alias-alert-active" | "alias-alert-faint" | "alias-alert-light" | "alias-alert-transparent" | "alias-alert-transparent-hover" | "alias-alert-transparent-active" | "alias-warning" | "alias-warning-hover" | "alias-warning-active" | "alias-warning-faint" | "alias-warning-light" | "alias-success" | "alias-success-hover" | "alias-success-active" | "alias-success-faint" | "alias-success-light" | "alias-transparent" | "alias-underlay" | "alias-input-selection" | "white" | "black" | "gray" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "alert-1" | "alert-2" | "alert-3" | "alert-4" | "alert-5" | "alert-6" | "alert-7" | "alert-8" | "alert-9" | "alert-10" | "warning-1" | "warning-2" | "warning-3" | "warning-4" | "warning-5" | "warning-6" | "warning-7" | "warning-8" | "warning-9" | "warning-10" | "success-1" | "success-2" | "success-3" | "success-4" | "success-5" | "success-6" | "success-7" | "success-8" | "success-9" | "success-10" | "neutral-1" | "neutral-2" | "neutral-3" | "neutral-4" | "neutral-5" | "neutral-6" | "neutral-7" | "neutral-8" | "neutral-9" | "neutral-10" | "accent-1" | "accent-2" | "accent-3" | "accent-4" | "accent-5" | "accent-6" | "accent-7" | "accent-8" | "accent-9" | "accent-10" | "currentcolor" | ResponsiveValue<BackgroundColorValue>
-
slot
Slot to render into.
string
-