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.

Counter
A counter indicate a running tally.
usage
import { Counter } from "@sharegate/orbit-ui";
sources
Github
Guidelines
When to use
  • When you need to complement the content of another component such as a tag or a checkbox.
Content
  • Only use numeric values.
  • If you need to display a number above 99, use “99+” instead of the number unless the number is important to the user’s objectives.
Usage
Default
A default counter.
15
Editable example
Divider
A counter can be rendered as a divider.
100+
Editable example
Highlight
A counter value can be highlighted.
15100+
Editable example
Pushed
A counter can pushed itself away from content.
Satellites 15
Satellites 100+
Editable example
API
Counter
usage
import { Counter } from "@sharegate/orbit-ui";
extends
NameDescriptionDefault
children*
React children.
string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal
-
disabled
Whether or not the counter is disabled.
falsetrue
-
highlight
Whether or not to add emphasis to the counter.
falsetrue
-
pushed
Whether or not the counter push itself away from the leading sibling element.
falsetrue
-
reverse
Whether or not to reverse counter elements order.
falsetrue
-
size
A counter can vary in size.
"xs" | "sm" | "md" | "lg" | "xl" | "inherit" | "2xl" | "3xl" | "4xl" | "5xl" | ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl" | "inherit" | "2xl" | "3xl" | "4xl" | "5xl">
-
slot
Slot to render into.
string
-
variant
The style to use.
"basic""divider"
-