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.
import { Dot } from "@sharegate/orbit-ui";
A default dot.
A dot can have a label.
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.
import { Dot } from "@sharegate/orbit-ui";
Name | Description | Default |
---|---|---|
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 | - |