page wrnexusui { seo { title = "@wrnexus/ui" description = "Themeable server-rendered UI components and CSS." } view {
W WRNexusJS
Browse documentation
Frontend · Preview

@wrnexus/ui

Themeable server-rendered UI components and CSS.

Private registry access required

This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:

bun add @wrnexus/ui@0.2.59

Request preview access. Never put registry tokens in source control.

First-party Wire UI component library — a set of themeable .wrn components plus a single tokenized stylesheet.

Part of the WRNexusJS framework — an SSR-first, Bun-native full-stack web framework.

Overview

@wrnexus/ui ships a library of server-rendered .wrn components (layout, form controls, and feedback UI) together with one themeable stylesheet, ui.css. The components are auto-discovered by the framework router — you don't import them in code. Once the package's component directory is on the router's scan path, you mount any component in a page with data-component="<name>". Every visual is driven by var(--wire-*) theme tokens, so components restyle instantly when the theme changes. The tiny JS surface (src/index.ts) exists only so the toolchain (CLI build + dev server) can locate the component directory and stylesheet.

The complete PDF-aligned catalog currently contains 891 components. The generated COMPONENTS.md and component-reference.json files document every mount name, prop, inferred type, default/required status, slot, event, category, and source file directly from the packaged .wrn source.

bun add @wrnexus/ui
Private package — the machine must be authenticated to the wrnexus npm org
(a read token in ~/.npmrc). Requires Bun (Node is not supported).

In practice you rarely install this directly: @wrnexus/cli and @wrnexus/dev-server already depend on it and wire it into the router for you (see [Auto-discovery](#auto-discovery)).

Components

Components live as .wrn files under packages/ui/components/. The mount name is the lowercase file basename (e.g. button.wrndata-component="button"). Each accepts a class prop (appended to its root element) and most render their body from either a named prop or the default slot.

Layout

NamePurposeKey props
containerMax-width centered content wrapperclass
stackVertical column with gapgap (0–8)
hstackHorizontal row with gapgap (0–8)
gridCSS grid containersee source
dividerHorizontal ruleclass
spacerFlexible/empty spacing elementsee source

Core / feedback

NamePurposeKey props
buttonButtonlabel, variant (default\primary\danger\ghost), size (sm\md\lg), type
inputText inputsee source
textareaMulti-line inputsee source
checkboxCheckboxsee source
badgeSmall status badgelabel, variant
alertCallout boxvariant (info\success\danger\warning), title, message
cardPadded, bordered surfaceclass
avatarUser avatarsee source
spinnerLoading indicatorsee source
disclosureExpandable details/summarysee source
theme-toggleTheme switch button (binds data-wire-theme-toggle)label

Additional controls & data display

Also shipped: select, radio, switch, progress, tag, skeleton, tooltip, table, FAQAccordion, AnnouncementBar, and BackToTop.

The PDF-defined minimum release and essential build-first set also includes typed typography, form primitives, loading actions, combobox and multi-select, time/date-time and recurring schedule controls, confirmation dialogs, data tables, filters, desktop/mobile navigation, mega menus, marketing/product/legal page shells, product and metric cards, FAQ composition, pricing comparison, SDK tabs, legal navigation, and cookie preferences.

Seo and StructuredData remain framework/page concerns rather than body components: use the native page seo { ... } block and document-head APIs so metadata is emitted in <head> instead of invalid component markup.

The authoritative, always-current list is uiComponentNames() (below), which reads the component directory at runtime.

For the full catalog, see [COMPONENTS.md](./COMPONENTS.md). The machine-readable equivalent is exported as @wrnexus/ui/component-reference.json.

API

The JS module (@wrnexus/ui) exposes four helpers used by the build tooling to locate the component assets. There is no component code to import — the components are .wrn files rendered server-side.

ExportSignatureReturns
uiComponentsDir() => stringAbsolute path to the .wrn component directory (feed to buildRouter's componentDirs).
uiCssPath() => stringAbsolute path to ui.css.
uiCss() => stringThe ui.css file contents (all .wire-* classes, themed via tokens).
uiComponentNames() => string[]Sorted list of built-in component names (e.g. for wrnexus eject listing).

./ui.css asset export

package.json also exposes the raw stylesheet as a subpath asset:

"exports": {
  ".": "./src/index.ts",
  "./ui.css": "./ui.css"
}

The framework serves this stylesheet once at /__wrnexus/ui.css, so pages get all component styles from a single request.

Tailwind and motion

Components use static Tailwind utility classes alongside the shared .wire-* layer. If the package is consumed by a separate Tailwind build, include its component sources so every utility is generated:

@import "tailwindcss";
@source "../node_modules/@wrnexus/ui/components/*.wrn";

The shared stylesheet gives all component boundaries consistent, GPU-friendly entry and interaction motion. Override --wire-motion-fast, --wire-motion-base, --wire-motion-slow, --wire-ease-standard, or --wire-ease-emphasized to tune it. Hover lift is limited to precise pointing devices and prefers-reduced-motion is honored automatically.

Usage

Auto-discovery

The router scans extra componentDirs (in addition to the app's own app/components) and keys components by name. Library dirs are scanned first and app/components last, so an app component of the same name shadows the library's. The CLI build (@wrnexus/cli) and dev server (@wrnexus/dev-server) both wire the UI directory in for you:

import { buildRouter } from "@wrnexus/router";
import { uiComponentsDir } from "@wrnexus/ui";

const router = buildRouter(appDir, { componentDirs: [uiComponentsDir()] });

Mounting components in a page

Once discovered, mount any component by name via data-component. Quoted attributes (other than data-component) become string props:

<div data-component="card">
  <div data-component="badge" label="New"></div>
  <button data-component="button" label="Save" variant="primary" size="lg"></button>
  <div data-component="alert" variant="success" title="Done" message="Saved."></div>
</div>

Overrides

Ways to customize the components, in increasing order of power:

1. Theme tokens — override CSS custom properties such as --wire-color-primary, --wire-color-surface, --wire-radius-sm, etc. Every component style resolves through var(--wire-*), so changing a token restyles everything instantly (including across theme switches). 2. App CSS — redefine a .wire-* class in your own stylesheet, which is loaded after ui.css and therefore wins. 3. class prop — pass a class prop to a component; it is appended to the component's root element, letting you add per-instance classes without touching the base styles. 4. wrnexus eject <name> — copy the component's .wrn source into your app/components, where (because app components shadow library ones) you fully own and can edit it. Use uiComponentNames() for the list of ejectable names.

Requirements / Notes

  • Bun-only — the package uses standard fs/path/url APIs but is published and
  • consumed within the Bun-native WRNexusJS toolchain (Node is not supported).

  • Peer packages: components are discovered and rendered by
  • [@wrnexus/router](../router) (via componentDirs) and served by [@wrnexus/dev-server](../dev-server) / built by [@wrnexus/cli](../cli).

  • Depends on [@wrnexus/core](../core) (dependencies).
  • theme-toggle relies on the framework's theme runtime, which binds the
  • data-wire-theme-toggle attribute — no per-component JS is required.

Complete TypeScript API

This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.

/**
 * @wrnexus/ui — the Wire UI component library.
 *
 * Components are `.wrn` files under `components/`, auto-discovered by the
 * framework (the router scans this directory in addition to the app's own
 * `app/components`). Mount them in any page with `data-component="<name>"`.
 * Their styles live in a single themeable stylesheet, `ui.css`, served once at
 * `/__wrnexus/ui.css` — every class uses `var(--wire-*)` theme tokens.
 *
 * Override, in increasing order of power:
 *   1. theme tokens (change `--wire-color-primary`, etc.)
 *   2. redefine a `.wire-*` class in your own CSS (loaded after ui.css)
 *   3. pass a `class` prop (appended to the component root)
 *   4. `wrnexus eject <name>` to copy the component into `app/components` and own it
 */
/** Absolute path to the directory of Wire UI component `.wrn` files. */
declare function uiComponentsDir(): string;
/** Absolute path to the Wire UI stylesheet. */
declare function uiCssPath(): string;
/** The Wire UI stylesheet contents (all `.wire-*` classes, themed via tokens). */
declare function uiCss(): string;
/** Names of the built-in components (e.g. for `wrnexus eject` listing). */
declare function uiComponentNames(): string[];

export { uiComponentNames, uiComponentsDir, uiCss, uiCssPath };

Examples

Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.

Auto-discovery

import { buildRouter } from "@wrnexus/router";
import { uiComponentsDir } from "@wrnexus/ui";

const router = buildRouter(appDir, { componentDirs: [uiComponentsDir()] });

Mounting components in a page

<div data-component="card">
  <div data-component="badge" label="New"></div>
  <button data-component="button" label="Save" variant="primary" size="lg"></button>
  <div data-component="alert" variant="success" title="Done" message="Saved."></div>
</div>

All 891 UI components and props

This reference is generated from the exact installed .wrn sources. Required props have no default; optional props show their default value.

Actions

ComponentPropsSlotsEvents
AcceptAllCookiesButton
data-component="AcceptAllCookiesButton"
Reusable accept all cookies button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ArticleNewsletterCTA
data-component="ArticleNewsletterCTA"
Reusable article newsletter c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ArticleShareActions
data-component="ArticleShareActions"
Reusable article share actions component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
BackButton
data-component="BackButton"
Reusable back button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
Button
data-component="Button"
Reusable button component.
label: string = "Button"
type: string = "button"
variant: string = "primary"
size: string = "md"
disabled: boolean = false
loading: boolean = false
icon: string = ""
className: string = ""
NoneNone
CenteredCTA
data-component="CenteredCTA"
Reusable centered c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ClearFiltersButton
data-component="ClearFiltersButton"
Reusable clear filters button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
CloseButton
data-component="CloseButton"
Reusable close button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
CodeCopyButton
data-component="CodeCopyButton"
Reusable code copy button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ContactCTA
data-component="ContactCTA"
Reusable contact c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ContactSalesButton
data-component="ContactSalesButton"
Reusable contact sales button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
CopyButton
data-component="CopyButton"
Reusable copy button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
CopyCodeButton
data-component="CopyCodeButton"
Reusable copy code button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
DangerButton
data-component="DangerButton"
Reusable danger button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
DeveloperCTA
data-component="DeveloperCTA"
Reusable developer c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
DoNotSellLink
data-component="DoNotSellLink"
Reusable do not sell link component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
DownloadAction
data-component="DownloadAction"
Reusable download action component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
DownloadButton
data-component="DownloadButton"
Reusable download button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
DownloadPolicyButton
data-component="DownloadPolicyButton"
Reusable download policy button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
EnterpriseCTA
data-component="EnterpriseCTA"
Reusable enterprise c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ErrorActions
data-component="ErrorActions"
Reusable error actions component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ErrorSupportLink
data-component="ErrorSupportLink"
Reusable error support link component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ExternalLink
data-component="ExternalLink"
Reusable external link component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
FieldActions
data-component="FieldActions"
Reusable field actions component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
FinalCTA
data-component="FinalCTA"
Reusable final c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
FormActions
data-component="FormActions"
Reusable form actions component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
GhostButton
data-component="GhostButton"
Reusable ghost button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
GradientCTA
data-component="GradientCTA"
Reusable gradient c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
HeaderActions
data-component="HeaderActions"
Reusable header actions component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
HeroActions
data-component="HeroActions"
Reusable hero actions component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
HeroPrimaryAction
data-component="HeroPrimaryAction"
Reusable hero primary action component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
HeroSecondaryAction
data-component="HeroSecondaryAction"
Reusable hero secondary action component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
IconButton
data-component="IconButton"
Reusable icon button component.
label: string = "Action"
icon: string = "•"
variant: string = "ghost"
disabled: boolean = false
NoneNone
LegalPrintButton
data-component="LegalPrintButton"
Reusable legal print button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
LinkButton
data-component="LinkButton"
Reusable link button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
LoadingButton
data-component="LoadingButton"
Reusable loading button component.
label: string = "Continue"
loadingLabel: string = "Loading…"
loading: boolean = false
disabled: boolean = false
type: string = "button"
variant: string = "primary"
class: string = ""
NoneNone
LocalizedRouteLink
data-component="LocalizedRouteLink"
Reusable localized route link component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
MobileMenuButton
data-component="MobileMenuButton"
Reusable mobile menu button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
NewsletterCTA
data-component="NewsletterCTA"
Reusable newsletter c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
OpenAPICTA
data-component="OpenAPICTA"
Reusable open a p i c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
PasskeyButton
data-component="PasskeyButton"
Reusable passkey button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
PlanCTA
data-component="PlanCTA"
Reusable plan c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
PostmanCTA
data-component="PostmanCTA"
Reusable postman c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
PrimaryButton
data-component="PrimaryButton"
Reusable primary button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
PrintAction
data-component="PrintAction"
Reusable print action component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
PrintPolicyButton
data-component="PrintPolicyButton"
Reusable print policy button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ProductCTA
data-component="ProductCTA"
Reusable product c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
RejectOptionalCookiesButton
data-component="RejectOptionalCookiesButton"
Reusable reject optional cookies button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ReopenCookieSettingsButton
data-component="ReopenCookieSettingsButton"
Reusable reopen cookie settings button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ResponsibleDisclosureCTA
data-component="ResponsibleDisclosureCTA"
Reusable responsible disclosure c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
SaveCookiePreferencesButton
data-component="SaveCookiePreferencesButton"
Reusable save cookie preferences button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
SearchButton
data-component="SearchButton"
Reusable search button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
SecondaryButton
data-component="SecondaryButton"
Reusable secondary button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
SectionActions
data-component="SectionActions"
Reusable section actions component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ShareAction
data-component="ShareAction"
Reusable share action component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ShareButton
data-component="ShareButton"
Reusable share button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
SignInLink
data-component="SignInLink"
Reusable sign in link component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
SkipLink
data-component="SkipLink"
Reusable skip link component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
SplitButton
data-component="SplitButton"
Reusable split button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
SplitCTA
data-component="SplitCTA"
Reusable split c t a component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
StartFreeButton
data-component="StartFreeButton"
Reusable start free button component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
TertiaryButton
data-component="TertiaryButton"
Reusable tertiary button component.
label: string = "Action"
type: string = "button"
disabled: boolean = false
class: string = ""
defaultNone
TextLink
data-component="TextLink"
Reusable text link component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone
ToastAction
data-component="ToastAction"
Reusable toast action component.
label: string = "Action"
href: string = ""
type: string = "button"
variant: string = "primary"
disabled: boolean = false
class: string = ""
defaultNone

Content

ComponentPropsSlotsEvents
AccessibleAccordion
data-component="AccessibleAccordion"
Reusable accessible accordion component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AccessibleCarousel
data-component="AccessibleCarousel"
Reusable accessible carousel component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AccessibleChartSummary
data-component="AccessibleChartSummary"
Reusable accessible chart summary component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AccessibleErrorSummary
data-component="AccessibleErrorSummary"
Reusable accessible error summary component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AccessibleIcon
data-component="AccessibleIcon"
Reusable accessible icon component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AccessibleTabs
data-component="AccessibleTabs"
Reusable accessible tabs component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AccessibleTooltip
data-component="AccessibleTooltip"
Reusable accessible tooltip component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Accordion
data-component="Accordion"
Reusable accordion component.
title: string = "Question"
open: boolean = false
defaultclick
AddOnCard
data-component="AddOnCard"
Reusable add on card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AddressPreview
data-component="AddressPreview"
Reusable address preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AdvancedFilterBuilder
data-component="AdvancedFilterBuilder"
Reusable advanced filter builder component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AnalyticsDashboardPreview
data-component="AnalyticsDashboardPreview"
Reusable analytics dashboard preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ApiEndpointCard
data-component="ApiEndpointCard"
Reusable api endpoint card component.
method: string = "GET"
path: string = "/api/example"
description: string = ""
defaultNone
ApiErrorExample
data-component="ApiErrorExample"
Reusable api error example component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ApiKeyDisplay
data-component="ApiKeyDisplay"
Reusable api key display component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ApiRequestExample
data-component="ApiRequestExample"
Reusable api request example component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ApiResponseExample
data-component="ApiResponseExample"
Reusable api response example component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ApiSchemaViewer
data-component="ApiSchemaViewer"
Reusable api schema viewer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AssetCard
data-component="AssetCard"
Reusable asset card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
AttachmentUpload
data-component="AttachmentUpload"
Reusable attachment upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AudioUpload
data-component="AudioUpload"
Reusable audio upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AuditLogPreview
data-component="AuditLogPreview"
Reusable audit log preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AuthorAvatar
data-component="AuthorAvatar"
Reusable author avatar component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AuthorCard
data-component="AuthorCard"
Reusable author card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AuthorizedApplicationCard
data-component="AuthorizedApplicationCard"
Reusable authorized application card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AutomationExampleCard
data-component="AutomationExampleCard"
Reusable automation example card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
AvailabilityCalendar
data-component="AvailabilityCalendar"
Reusable availability calendar component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Avatar
data-component="Avatar"
Reusable avatar component.
src: string = ""
alt: string = ""
initials: string = "WR"
size: string = "md"
NoneNone
AvatarUpload
data-component="AvatarUpload"
Reusable avatar upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
BankTransferDetails
data-component="BankTransferDetails"
Reusable bank transfer details component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
BillingAddressForm
data-component="BillingAddressForm"
Reusable billing address form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
BillingExample
data-component="BillingExample"
Reusable billing example component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
BlogCard
data-component="BlogCard"
Reusable blog card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
BlogSearch
data-component="BlogSearch"
Reusable blog search component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
BodyText
data-component="BodyText"
Reusable body text component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
BudgetRangeSlider
data-component="BudgetRangeSlider"
Reusable budget range slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Calendar
data-component="Calendar"
Reusable calendar component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CampaignCard
data-component="CampaignCard"
Reusable campaign card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
CampaignPerformancePreview
data-component="CampaignPerformancePreview"
Reusable campaign performance preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Card
data-component="Card"
Reusable card component.
variant: string = "default"
padding: string = "md"
interactive: boolean = false
className: string = ""
defaultNone
CardPaymentForm
data-component="CardPaymentForm"
Reusable card payment form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CareerApplicationForm
data-component="CareerApplicationForm"
Reusable career application form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Carousel
data-component="Carousel"
Reusable carousel component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CaseStudyCard
data-component="CaseStudyCard"
Reusable case study card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CaseStudyPreview
data-component="CaseStudyPreview"
Reusable case study preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CertificateUpload
data-component="CertificateUpload"
Reusable certificate upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ChannelCard
data-component="ChannelCard"
Reusable channel card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
ChannelIcon
data-component="ChannelIcon"
Reusable channel icon component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ChartTooltip
data-component="ChartTooltip"
Reusable chart tooltip component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Checklist
data-component="Checklist"
Reusable checklist component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ClickableCard
data-component="ClickableCard"
Reusable clickable card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
Code
data-component="Code"
Reusable code component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CodeBlock
data-component="CodeBlock"
Reusable code block component.
language: string = "text"
filename: string = ""
code: string = ""
Noneclick
CodeTabs
data-component="CodeTabs"
Reusable code tabs component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CodeText
data-component="CodeText"
Reusable code text component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
ColorSwatch
data-component="ColorSwatch"
Reusable color swatch component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CommandBlock
data-component="CommandBlock"
Reusable command block component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ComplianceProgramCard
data-component="ComplianceProgramCard"
Reusable compliance program card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ConnectedAccountCard
data-component="ConnectedAccountCard"
Reusable connected account card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ConnectionCard
data-component="ConnectionCard"
Reusable connection card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
ConsentTimelinePreview
data-component="ConsentTimelinePreview"
Reusable consent timeline preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ContactCard
data-component="ContactCard"
Reusable contact card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
ContactForm
data-component="ContactForm"
Reusable contact form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ContactSalesForm
data-component="ContactSalesForm"
Reusable contact sales form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ContextSwitcher
data-component="ContextSwitcher"
Reusable context switcher component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ConversationPreview
data-component="ConversationPreview"
Reusable conversation preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CostSummary
data-component="CostSummary"
Reusable cost summary component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CronBuilder
data-component="CronBuilder"
Reusable cron builder component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CsvUpload
data-component="CsvUpload"
Reusable csv upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CustomerLogo
data-component="CustomerLogo"
Reusable customer logo component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
CustomerStoryCard
data-component="CustomerStoryCard"
Reusable customer story card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DataProtectionCard
data-component="DataProtectionCard"
Reusable data protection card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DateRangeCalendar
data-component="DateRangeCalendar"
Reusable date range calendar component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DateRangeSlider
data-component="DateRangeSlider"
Reusable date range slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DeliveryPreview
data-component="DeliveryPreview"
Reusable delivery preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DemoRequestForm
data-component="DemoRequestForm"
Reusable demo request form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DeveloperSearch
data-component="DeveloperSearch"
Reusable developer search component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DeviceCard
data-component="DeviceCard"
Reusable device card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DocumentPreview
data-component="DocumentPreview"
Reusable document preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DocumentUpload
data-component="DocumentUpload"
Reusable document upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DownloadGateForm
data-component="DownloadGateForm"
Reusable download gate form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DownloadResourceForm
data-component="DownloadResourceForm"
Reusable download resource form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
DurationSlider
data-component="DurationSlider"
Reusable duration slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ElevatedCard
data-component="ElevatedCard"
Reusable elevated card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
EmailComposer
data-component="EmailComposer"
Reusable email composer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
EnterprisePricingCard
data-component="EnterprisePricingCard"
Reusable enterprise pricing card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
EnvironmentSwitcher
data-component="EnvironmentSwitcher"
Reusable environment switcher component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ErrorCard
data-component="ErrorCard"
Reusable error card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
ErrorCode
data-component="ErrorCode"
Reusable error code component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ErrorIllustration
data-component="ErrorIllustration"
Reusable error illustration component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ErrorPage
data-component="ErrorPage"
Reusable error page component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
EstimatedCostSummary
data-component="EstimatedCostSummary"
Reusable estimated cost summary component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ExpandableText
data-component="ExpandableText"
Reusable expandable text component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
EyebrowText
data-component="EyebrowText"
Reusable eyebrow text component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
FactorCard
data-component="FactorCard"
Reusable factor card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
FallbackRouteBuilder
data-component="FallbackRouteBuilder"
Reusable fallback route builder component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
FaviconUpload
data-component="FaviconUpload"
Reusable favicon upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
FeatureCard
data-component="FeatureCard"
Reusable feature card component.
icon: string = "✦"
title: string = "Feature"
description: string = ""
href: string = ""
NoneNone
FeatureChecklist
data-component="FeatureChecklist"
Reusable feature checklist component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
FeaturedBlogCard
data-component="FeaturedBlogCard"
Reusable featured blog card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
FeatureIconCard
data-component="FeatureIconCard"
Reusable feature icon card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
FeatureTabs
data-component="FeatureTabs"
Reusable feature tabs component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
FileSizeLabel
data-component="FileSizeLabel"
Reusable file size label component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
FileUpload
data-component="FileUpload"
Reusable file upload component.
id: string = "file"
name: string = "file"
label: string = "Upload file"
accept: string = ""
multiple: boolean = false
help: string = "Drag and drop or browse"
NoneNone
FooterLanguageSwitcher
data-component="FooterLanguageSwitcher"
Reusable footer language switcher component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ForbiddenPage
data-component="ForbiddenPage"
Reusable forbidden page component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ForgotPasswordForm
data-component="ForgotPasswordForm"
Reusable forgot password form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Form
data-component="Form"
Reusable form component.
action: string = ""
method: string = "post"
name: string = ""
loading: boolean = false
class: string = ""
defaultNone
FormErrorSummary
data-component="FormErrorSummary"
Reusable form error summary component.
title: string = "Please fix the following"
visible: boolean = true
defaultNone
FormHelpText
data-component="FormHelpText"
Reusable form help text component.
id: string = ""
text: string = ""
class: string = ""
defaultNone
FormLabel
data-component="FormLabel"
Reusable form label component.
for: string = ""
label: string = "Label"
required: boolean = false
optional: boolean = false
class: string = ""
NoneNone
GlassCard
data-component="GlassCard"
Reusable glass card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
GlobalSearch
data-component="GlobalSearch"
Reusable global search component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
GuideCard
data-component="GuideCard"
Reusable guide card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
GuideChecklist
data-component="GuideChecklist"
Reusable guide checklist component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
GuideStep
data-component="GuideStep"
Reusable guide step component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
HeroGradientText
data-component="HeroGradientText"
Reusable hero gradient text component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
HeroProductPreview
data-component="HeroProductPreview"
Reusable hero product preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
HeroTrustText
data-component="HeroTrustText"
Reusable hero trust text component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
HighlightText
data-component="HighlightText"
Reusable highlight text component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
HolidayCalendar
data-component="HolidayCalendar"
Reusable holiday calendar component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
HumanApprovalStep
data-component="HumanApprovalStep"
Reusable human approval step component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Icon
data-component="Icon"
Reusable icon component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Illustration
data-component="Illustration"
Reusable illustration component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ImageCompressionPreview
data-component="ImageCompressionPreview"
Reusable image compression preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ImageUpload
data-component="ImageUpload"
Reusable image upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
IncidentCard
data-component="IncidentCard"
Reusable incident card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
InfoCard
data-component="InfoCard"
Reusable info card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
InlineCode
data-component="InlineCode"
Reusable inline code component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
IntegrationCard
data-component="IntegrationCard"
Reusable integration card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
InvoiceLineItem
data-component="InvoiceLineItem"
Reusable invoice line item component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
InvoiceSummary
data-component="InvoiceSummary"
Reusable invoice summary component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
JobCard
data-component="JobCard"
Reusable job card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
JsonViewer
data-component="JsonViewer"
Reusable json viewer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
KycDocumentUpload
data-component="KycDocumentUpload"
Reusable kyc document upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
LanguageSwitcher
data-component="LanguageSwitcher"
Reusable language switcher component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
LeadText
data-component="LeadText"
Reusable lead text component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
LegalContactBlock
data-component="LegalContactBlock"
Reusable legal contact block component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
LegalSummary
data-component="LegalSummary"
Reusable legal summary component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Logo
data-component="Logo"
Reusable logo component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
LogoUpload
data-component="LogoUpload"
Reusable logo upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MaintenanceCard
data-component="MaintenanceCard"
Reusable maintenance card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MaintenancePage
data-component="MaintenancePage"
Reusable maintenance page component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MessageComposer
data-component="MessageComposer"
Reusable message composer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MessageComposerPreview
data-component="MessageComposerPreview"
Reusable message composer preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MessagePreview
data-component="MessagePreview"
Reusable message preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MessageVolumeSlider
data-component="MessageVolumeSlider"
Reusable message volume slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MetricCard
data-component="MetricCard"
Reusable metric card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MetricText
data-component="MetricText"
Reusable metric text component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
MobileTableCard
data-component="MobileTableCard"
Reusable mobile table card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MultiFileUpload
data-component="MultiFileUpload"
Reusable multi file upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
MutedText
data-component="MutedText"
Reusable muted text component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
NavigationItem
data-component="NavigationItem"
Reusable navigation item component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
NewsletterForm
data-component="NewsletterForm"
Reusable newsletter form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
NotFoundPage
data-component="NotFoundPage"
Reusable not found page component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
NotificationCard
data-component="NotificationCard"
Reusable notification card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
OfficeCard
data-component="OfficeCard"
Reusable office card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
OfflinePage
data-component="OfflinePage"
Reusable offline page component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
OneTimeSecretDisplay
data-component="OneTimeSecretDisplay"
Reusable one time secret display component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
OpacitySlider
data-component="OpacitySlider"
Reusable opacity slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
OtpVerificationForm
data-component="OtpVerificationForm"
Reusable otp verification form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
OutlinedCard
data-component="OutlinedCard"
Reusable outlined card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
PartnerApplicationForm
data-component="PartnerApplicationForm"
Reusable partner application form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PartnerProgramCard
data-component="PartnerProgramCard"
Reusable partner program card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PaymentMethodCard
data-component="PaymentMethodCard"
Reusable payment method card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PdfPreview
data-component="PdfPreview"
Reusable pdf preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PlatformPillarCard
data-component="PlatformPillarCard"
Reusable platform pillar card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PressReleaseCard
data-component="PressReleaseCard"
Reusable press release card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PriceRangeSlider
data-component="PriceRangeSlider"
Reusable price range slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PriceText
data-component="PriceText"
Reusable price text component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
PricingCard
data-component="PricingCard"
Reusable pricing card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PricingContactForm
data-component="PricingContactForm"
Reusable pricing contact form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PricingPlanCard
data-component="PricingPlanCard"
Reusable pricing plan card component.
name: string = "Starter"
description: string = ""
price: string = "₹0"
period: string = "/month"
featured: boolean = false
ctaLabel: string = "Choose plan"
ctaHref: string = "#"
defaultNone
ProductCard
data-component="ProductCard"
Reusable product card component.
eyebrow: string = "Product"
title: string = "Product name"
description: string = ""
href: string = "#"
actionLabel: string = "Learn more"
status: string = ""
class: string = ""
NoneNone
ProductIcon
data-component="ProductIcon"
Reusable product icon component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ProductLogo
data-component="ProductLogo"
Reusable product logo component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ProductMiniCard
data-component="ProductMiniCard"
Reusable product mini card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ProductNavigationCard
data-component="ProductNavigationCard"
Reusable product navigation card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ProgressSlider
data-component="ProgressSlider"
Reusable progress slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ProjectCard
data-component="ProjectCard"
Reusable project card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
ProjectSwitcher
data-component="ProjectSwitcher"
Reusable project switcher component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PublicHeaderLogo
data-component="PublicHeaderLogo"
Reusable public header logo component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
PushComposer
data-component="PushComposer"
Reusable push composer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
QrCode
data-component="QrCode"
Reusable qr code component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
QuantityStepper
data-component="QuantityStepper"
Reusable quantity stepper component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
QuoteText
data-component="QuoteText"
Reusable quote text component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
RangeSlider
data-component="RangeSlider"
Reusable range slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
RateLimitPage
data-component="RateLimitPage"
Reusable rate limit page component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
RatingSlider
data-component="RatingSlider"
Reusable rating slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
RecoveryCodeForm
data-component="RecoveryCodeForm"
Reusable recovery code form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
RecurrenceRuleBuilder
data-component="RecurrenceRuleBuilder"
Reusable recurrence rule builder component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ReportCard
data-component="ReportCard"
Reusable report card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
RequestResponseViewer
data-component="RequestResponseViewer"
Reusable request response viewer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
RequestViewer
data-component="RequestViewer"
Reusable request viewer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ResetPasswordForm
data-component="ResetPasswordForm"
Reusable reset password form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ResourceCard
data-component="ResourceCard"
Reusable resource card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ResourceDownloadCard
data-component="ResourceDownloadCard"
Reusable resource download card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ResourceSearch
data-component="ResourceSearch"
Reusable resource search component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ResponseViewer
data-component="ResponseViewer"
Reusable response viewer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SDKCard
data-component="SDKCard"
Reusable s d k card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SDKLanguageTabs
data-component="SDKLanguageTabs"
Reusable s d k language tabs component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SearchCategoryTabs
data-component="SearchCategoryTabs"
Reusable search category tabs component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SearchResultItem
data-component="SearchResultItem"
Reusable search result item component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SecretDisplay
data-component="SecretDisplay"
Reusable secret display component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SecurityContactCard
data-component="SecurityContactCard"
Reusable security contact card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SecurityFeatureCard
data-component="SecurityFeatureCard"
Reusable security feature card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SecurityReportForm
data-component="SecurityReportForm"
Reusable security report form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ServerErrorPage
data-component="ServerErrorPage"
Reusable server error page component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SessionCard
data-component="SessionCard"
Reusable session card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SetupChecklist
data-component="SetupChecklist"
Reusable setup checklist component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SignInForm
data-component="SignInForm"
Reusable sign in form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SignUpForm
data-component="SignUpForm"
Reusable sign up form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SiteSearch
data-component="SiteSearch"
Reusable site search component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Slider
data-component="Slider"
Reusable slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SmallText
data-component="SmallText"
Reusable small text component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
SmsComposer
data-component="SmsComposer"
Reusable sms composer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
StatCard
data-component="StatCard"
Reusable stat card component.
label: string = "Metric"
value: string = "0"
change: string = ""
trend: string = "neutral"
NoneNone
StatusSubscribeForm
data-component="StatusSubscribeForm"
Reusable status subscribe form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Stepper
data-component="Stepper"
Reusable stepper component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
SuccessCard
data-component="SuccessCard"
Reusable success card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
SupportRequestForm
data-component="SupportRequestForm"
Reusable support request form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Tabs
data-component="Tabs"
Reusable tabs component.
active: string = "first"first
second
click
TeamMemberCard
data-component="TeamMemberCard"
Reusable team member card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
TemplateCard
data-component="TemplateCard"
Reusable template card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
TerminalBlock
data-component="TerminalBlock"
Reusable terminal block component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
TestimonialCard
data-component="TestimonialCard"
Reusable testimonial card component.
quote: string = "Great product."
name: string = "Customer"
role: string = ""
company: string = ""
avatar: string = ""
NoneNone
TestimonialCarousel
data-component="TestimonialCarousel"
Reusable testimonial carousel component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ThemeSwitcher
data-component="ThemeSwitcher"
Reusable theme switcher component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
TimelineItem
data-component="TimelineItem"
Reusable timeline item component.
title: string = "Event"
date: string = ""
description: string = ""
status: string = "default"
NoneNone
ToastIcon
data-component="ToastIcon"
Reusable toast icon component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Tooltip
data-component="Tooltip"
Reusable tooltip component.
text: string = "Helpful information"
position: string = "top"
defaultNone
TotpVerificationForm
data-component="TotpVerificationForm"
Reusable totp verification form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
TranslatedText
data-component="TranslatedText"
Reusable translated text component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
TruncatedText
data-component="TruncatedText"
Reusable truncated text component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
UnifiedTimelinePreview
data-component="UnifiedTimelinePreview"
Reusable unified timeline preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
UploadItem
data-component="UploadItem"
Reusable upload item component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
UploadPreview
data-component="UploadPreview"
Reusable upload preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
UserCard
data-component="UserCard"
Reusable user card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
ValueCard
data-component="ValueCard"
Reusable value card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
VerticalTabs
data-component="VerticalTabs"
Reusable vertical tabs component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
VideoCard
data-component="VideoCard"
Reusable video card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
VideoUpload
data-component="VideoUpload"
Reusable video upload component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
VoiceScriptComposer
data-component="VoiceScriptComposer"
Reusable voice script composer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
VolumeSlider
data-component="VolumeSlider"
Reusable volume slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
WarningCard
data-component="WarningCard"
Reusable warning card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
WebhookEventCard
data-component="WebhookEventCard"
Reusable webhook event card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
WebhookPayloadViewer
data-component="WebhookPayloadViewer"
Reusable webhook payload viewer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
WebinarCard
data-component="WebinarCard"
Reusable webinar card component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
WebinarRegistrationForm
data-component="WebinarRegistrationForm"
Reusable webinar registration form component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
WhatsAppComposer
data-component="WhatsAppComposer"
Reusable whats app composer component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
Wizard
data-component="Wizard"
Reusable wizard component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
WorkflowCanvasPreview
data-component="WorkflowCanvasPreview"
Reusable workflow canvas preview component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
WorkspaceCard
data-component="WorkspaceCard"
Reusable workspace card component.
title: string = ""
description: string = ""
href: string = ""
class: string = ""
defaultNone
WorkspaceSwitcher
data-component="WorkspaceSwitcher"
Reusable workspace switcher component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone
ZoomSlider
data-component="ZoomSlider"
Reusable zoom slider component.
eyebrow: string = ""
title: string = ""
description: string = ""
href: string = ""
actionLabel: string = "Learn more"
image: string = ""
alt: string = ""
class: string = ""
defaultNone

Core

ComponentPropsSlotsEvents
AnnouncementBar
data-component="AnnouncementBar"
Reusable announcement bar component.
badge: string = "New"
message: string = "WRNexusJS Organizations is now available."
description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
href: string = "/organizations"
actionLabel: string = "Explore organizations"
ariaLabel: string = "Announcement"
Noneclick
AspectRatio
data-component="AspectRatio"
Reusable aspect ratio component.
class: string = ""defaultNone
BackToTop
data-component="BackToTop"
Reusable back to top component.
label: string = "Back to top"
assistiveLabel: string = "Return to the top of the page"
threshold: number = 500
Noneclick
Breadcrumbs
data-component="Breadcrumbs"
Reusable breadcrumbs component.
homeLabel: string = "Home"
homeHref: string = "/"
current: string = "Current page"
NoneNone
Checkbox
data-component="Checkbox"
Reusable checkbox component.
id: string = ""
name: string = ""
label: string = "Checkbox"
description: string = ""
checked: boolean = false
disabled: boolean = false
NoneNone
Chip
data-component="Chip"
Reusable chip component.
label: string = "Chip"
variant: string = "default"
class: string = ""
defaultNone
Cluster
data-component="Cluster"
Reusable cluster component.
gap: string = "4"
className: string = ""
defaultNone
Combobox
data-component="Combobox"
Reusable combobox component.
id: string = "combobox"
name: string = ""
label: string = "Choose an option"
placeholder: string = "Search options"
options: string = []
required: boolean = false
disabled: boolean = false
class: string = ""
NoneNone
Container
data-component="Container"
Reusable container component.
size: string = "default"
className: string = ""
defaultNone
disclosure
data-component="disclosure"
Reusable disclosure component.
summary: string = "Details"
class: string = ""
defaultNone
DisplayHeading
data-component="DisplayHeading"
Reusable display heading component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
Divider
data-component="Divider"
Reusable divider component.
className: string = ""defaultNone
Drawer
data-component="Drawer"
Reusable drawer component.
title: string = "Panel"
open: boolean = false
side: string = "right"
defaultclick
FAQ
data-component="FAQ"
Reusable faq component.
eyebrow: string = ""
title: string = "Frequently asked questions"
description: string = ""
items: string = []
centered: boolean = true
allowMultiple: boolean = false
defaultOpenIndex: number = 0
NoneNone
FAQAccordion
data-component="FAQAccordion"
Reusable faqaccordion component.
eyebrow: string = ""
title: string = "Frequently asked questions"
description: string = ""
items: string = []
centered: boolean = true
compact: boolean = false
allowMultiple: boolean = false
defaultOpenIndex: number = 0
showContact: boolean = false
contactText: string = "Still have questions?"
contactLabel: string = "Contact support"
contactHref: string = "/support"
Noneclick
file-upload
data-component="file-upload"
Reusable file-upload component.
store: string = "public"
endpoint: string = "/api/upload"
accept: string = ""
multiple: boolean = false
max: number = 0
label: string = "Drag files here or click to browse"
class: string = ""
NoneNone
FilterBar
data-component="FilterBar"
Reusable filter bar component.
label: string = "Filters"
clearLabel: string = "Clear filters"
showClear: boolean = true
class: string = ""
defaultNone
Flex
data-component="Flex"
Reusable flex component.
class: string = ""defaultNone
FormError
data-component="FormError"
Reusable form error component.
id: string = ""
message: string = ""
class: string = ""
defaultNone
FullBleed
data-component="FullBleed"
Reusable full bleed component.
class: string = ""defaultNone
hstack
data-component="hstack"
Reusable hstack component.
gap: string = "4"
align: string = "center"
class: string = ""
defaultNone
Inline
data-component="Inline"
Reusable inline component.
gap: string = "4"
className: string = ""
defaultNone
input
data-component="input"
Reusable input component.
type: string = "text"
name: string = ""
value: string = ""
placeholder: string = ""
class: string = ""
NoneNone
LegalTableOfContents
data-component="LegalTableOfContents"
Reusable legal table of contents component.
title: string = "On this page"
items: string = []
class: string = ""
NoneNone
Link
data-component="Link"
Reusable link component.
href: string = "#"
label: string = "Link"
external: boolean = false
className: string = ""
NoneNone
LogoCloud
data-component="LogoCloud"
Reusable logo cloud component.
title: string = "Trusted by modern teams"defaultNone
Modal
data-component="Modal"
Reusable modal component.
title: string = "Dialog"
description: string = ""
open: boolean = false
size: string = "md"
closeLabel: string = "Close"
defaultclick
MultiSelect
data-component="MultiSelect"
Reusable multi select component.
id: string = "multi-select"
name: string = ""
label: string = "Choose options"
options: string = []
required: boolean = false
disabled: boolean = false
size: number = 5
class: string = ""
NoneNone
NarrowContainer
data-component="NarrowContainer"
Reusable narrow container component.
class: string = ""defaultNone
NotificationDot
data-component="NotificationDot"
Reusable notification dot component.
label: string = "Notification"
variant: string = "default"
class: string = ""
defaultNone
PageHeading
data-component="PageHeading"
Reusable page heading component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
PageShell
data-component="PageShell"
Reusable page shell component.
className: string = ""defaultNone
Pagination
data-component="Pagination"
Reusable pagination component.
page: number = 1
totalPages: number = 1
previousHref: string = "#"
nextHref: string = "#"
NoneNone
Pill
data-component="Pill"
Reusable pill component.
label: string = "Pill"
variant: string = "default"
class: string = ""
defaultNone
progress
data-component="progress"
Reusable progress component.
value: number = 0
max: number = 100
class: string = ""
NoneNone
ProgressBar
data-component="ProgressBar"
Reusable progress bar component.
value: number = 0
max: number = 100
label: string = "Progress"
showValue: boolean = true
NoneNone
PublicFooter
data-component="PublicFooter"
Reusable public footer component.
brand: string = "WRNexusJS"
description: string = "SSR-first, Bun-native full-stack framework."
copyright: string = "© 2026 WorkRoot Workspace"
defaultNone
Radio
data-component="Radio"
Reusable radio component.
id: string = ""
name: string = "choice"
value: string = ""
label: string = "Option"
description: string = ""
checked: boolean = false
disabled: boolean = false
NoneNone
ScrollArea
data-component="ScrollArea"
Reusable scroll area component.
class: string = ""defaultNone
SDKTabs
data-component="SDKTabs"
Reusable sdktabs component.
label: string = "SDK languages"
tabs: string = []
defaultIndex: number = 0
class: string = ""
Noneclick
SectionHeading
data-component="SectionHeading"
Reusable section heading component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
Select
data-component="Select"
Reusable select component.
id: string = ""
name: string = ""
label: string = "Select"
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
defaultNone
spacer
data-component="spacer"
Reusable spacer component.
class: string = ""NoneNone
Spinner
data-component="Spinner"
Reusable spinner component.
label: string = "Loading"
size: string = "md"
NoneNone
Stack
data-component="Stack"
Reusable stack component.
gap: string = "4"
className: string = ""
defaultNone
Sticky
data-component="Sticky"
Reusable sticky component.
class: string = ""defaultNone
SubsectionHeading
data-component="SubsectionHeading"
Reusable subsection heading component.
text: string = ""
align: string = "start"
class: string = ""
defaultNone
Surface
data-component="Surface"
Reusable surface component.
class: string = ""defaultNone
Switch
data-component="Switch"
Reusable switch component.
id: string = ""
name: string = ""
label: string = "Switch"
description: string = ""
checked: boolean = false
disabled: boolean = false
Noneclick
tag
data-component="tag"
Reusable tag component.
label: string = ""
variant: string = "default"
class: string = ""
defaultNone
Textarea
data-component="Textarea"
Reusable textarea component.
id: string = ""
name: string = ""
label: string = "Message"
value: string = ""
placeholder: string = ""
rows: number = 5
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
NoneNone
theme-toggle
data-component="theme-toggle"
Reusable theme-toggle component.
label: string = "Toggle theme"
class: string = ""
defaultNone
Toast
data-component="Toast"
Reusable toast component.
title: string = "Saved"
description: string = ""
variant: string = "success"
duration: number = 5000
Noneclick
Typography
data-component="Typography"
Reusable typography component.
as: string = "p"
variant: string = "body"
align: string = "start"
class: string = ""
defaultNone
VisuallyHidden
data-component="VisuallyHidden"
Reusable visually hidden component.
className: string = ""defaultNone
Well
data-component="Well"
Reusable well component.
class: string = ""defaultNone
WideContainer
data-component="WideContainer"
Reusable wide container component.
class: string = ""defaultNone

Data

ComponentPropsSlotsEvents
ActiveFilterList
data-component="ActiveFilterList"
Reusable active filter list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ActivityList
data-component="ActivityList"
Reusable activity list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ApiHeaderTable
data-component="ApiHeaderTable"
Reusable api header table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ApiParameterTable
data-component="ApiParameterTable"
Reusable api parameter table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ApiSchemaTable
data-component="ApiSchemaTable"
Reusable api schema table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
AuditTable
data-component="AuditTable"
Reusable audit table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
AutoGrid
data-component="AutoGrid"
Reusable auto grid component.
class: string = ""defaultNone
BlogGrid
data-component="BlogGrid"
Reusable blog grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
BlogList
data-component="BlogList"
Reusable blog list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
CalendarGrid
data-component="CalendarGrid"
Reusable calendar grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
CapabilityGrid
data-component="CapabilityGrid"
Reusable capability grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
CareerBenefitsGrid
data-component="CareerBenefitsGrid"
Reusable career benefits grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ChannelComparisonTable
data-component="ChannelComparisonTable"
Reusable channel comparison table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ChannelRateTable
data-component="ChannelRateTable"
Reusable channel rate table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ColorGrid
data-component="ColorGrid"
Reusable color grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ComparisonTable
data-component="ComparisonTable"
Reusable comparison table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ComplianceBadgeList
data-component="ComplianceBadgeList"
Reusable compliance badge list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ConversationList
data-component="ConversationList"
Reusable conversation list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
CookieCategoryList
data-component="CookieCategoryList"
Reusable cookie category list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
CookieDetailsTable
data-component="CookieDetailsTable"
Reusable cookie details table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
CookieTable
data-component="CookieTable"
Reusable cookie table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
DataRetentionTable
data-component="DataRetentionTable"
Reusable data retention table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
DataTable
data-component="DataTable"
Reusable data table component.
caption: string = "Data table"
columns: string = []
rows: string = []
emptyMessage: string = "No data available."
striped: boolean = false
class: string = ""
NoneNone
DefinitionList
data-component="DefinitionList"
Reusable definition list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
DescriptionList
data-component="DescriptionList"
Reusable description list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
EventTable
data-component="EventTable"
Reusable event table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
FeatureComparisonTable
data-component="FeatureComparisonTable"
Reusable feature comparison table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
FeatureGrid
data-component="FeatureGrid"
Reusable feature grid component.
columns: number = 3
className: string = ""
defaultNone
FeatureList
data-component="FeatureList"
Reusable feature list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
FileList
data-component="FileList"
Reusable file list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
FilterableTable
data-component="FilterableTable"
Reusable filterable table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
FormGrid
data-component="FormGrid"
Reusable form grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
FormRow
data-component="FormRow"
Reusable form row component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
Grid
data-component="Grid"
Reusable grid component.
gap: string = "4"
className: string = ""
defaultNone
GuideGrid
data-component="GuideGrid"
Reusable guide grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
IncidentList
data-component="IncidentList"
Reusable incident list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
KeyValueTable
data-component="KeyValueTable"
Reusable key value table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
LeadershipGrid
data-component="LeadershipGrid"
Reusable leadership grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
LegalBulletList
data-component="LegalBulletList"
Reusable legal bullet list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
LegalDefinitionList
data-component="LegalDefinitionList"
Reusable legal definition list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
LegalTable
data-component="LegalTable"
Reusable legal table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
List
data-component="List"
Reusable list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
LogTable
data-component="LogTable"
Reusable log table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
MemberList
data-component="MemberList"
Reusable member list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
MetricGrid
data-component="MetricGrid"
Reusable metric grid component.
label: string = "Key metrics"
metrics: string = []
class: string = ""
NoneNone
NotificationList
data-component="NotificationList"
Reusable notification list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
PartnerLogoGrid
data-component="PartnerLogoGrid"
Reusable partner logo grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
PasswordRequirementList
data-component="PasswordRequirementList"
Reusable password requirement list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
PlanFeatureList
data-component="PlanFeatureList"
Reusable plan feature list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
PlanLimitList
data-component="PlanLimitList"
Reusable plan limit list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
PolicyVersionTable
data-component="PolicyVersionTable"
Reusable policy version table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
PricingComparisonTable
data-component="PricingComparisonTable"
Reusable pricing comparison table component.
caption: string = "Plan comparison"
plans: string = []
features: string = []
class: string = ""
NoneNone
PricingGrid
data-component="PricingGrid"
Reusable pricing grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
PricingTable
data-component="PricingTable"
Reusable pricing table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ProductFeatureList
data-component="ProductFeatureList"
Reusable product feature list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ProductGrid
data-component="ProductGrid"
Reusable product grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ProductIntegrationList
data-component="ProductIntegrationList"
Reusable product integration list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ProductList
data-component="ProductList"
Reusable product list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ProductUseCaseList
data-component="ProductUseCaseList"
Reusable product use case list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
RateTable
data-component="RateTable"
Reusable rate table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
RegionAvailabilityTable
data-component="RegionAvailabilityTable"
Reusable region availability table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ResponsiveTable
data-component="ResponsiveTable"
Reusable responsive table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
RetentionTable
data-component="RetentionTable"
Reusable retention table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
SecurityPillarGrid
data-component="SecurityPillarGrid"
Reusable security pillar grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
SecurityPracticeList
data-component="SecurityPracticeList"
Reusable security practice list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ServiceLevelTable
data-component="ServiceLevelTable"
Reusable service level table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ServiceStatusList
data-component="ServiceStatusList"
Reusable service status list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ServiceStatusRow
data-component="ServiceStatusRow"
Reusable service status row component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
SlaTable
data-component="SlaTable"
Reusable sla table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
SortableTable
data-component="SortableTable"
Reusable sortable table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
StatusTable
data-component="StatusTable"
Reusable status table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
SubprocessorTable
data-component="SubprocessorTable"
Reusable subprocessor table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
Table
data-component="Table"
Reusable table component.
caption: string = "Data table"
responsive: boolean = true
defaultNone
TableRow
data-component="TableRow"
Reusable table row component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
TreeTable
data-component="TreeTable"
Reusable tree table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
TrustBadgeList
data-component="TrustBadgeList"
Reusable trust badge list component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
UsagePricingTable
data-component="UsagePricingTable"
Reusable usage pricing table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
ValuesGrid
data-component="ValuesGrid"
Reusable values grid component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone
VirtualizedTable
data-component="VirtualizedTable"
Reusable virtualized table component.
title: string = ""
description: string = ""
empty: boolean = false
emptyText: string = "No items available."
class: string = ""
defaultNone

Feedback

ComponentPropsSlotsEvents
AccountStatusBanner
data-component="AccountStatusBanner"
Reusable account status banner component.
label: string = "AccountStatus"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
Alert
data-component="Alert"
Reusable alert component.
title: string = "Notice"
description: string = ""
variant: string = "info"
dismissible: boolean = false
defaultclick
ApiAuthenticationNotice
data-component="ApiAuthenticationNotice"
Reusable api authentication notice component.
label: string = "ApiAuthentication"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ApiMethodBadge
data-component="ApiMethodBadge"
Reusable api method badge component.
label: string = "ApiMethod"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ApiRateLimitNotice
data-component="ApiRateLimitNotice"
Reusable api rate limit notice component.
label: string = "ApiRateLimit"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ApiVersionBadge
data-component="ApiVersionBadge"
Reusable api version badge component.
label: string = "ApiVersion"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
Badge
data-component="Badge"
Reusable badge component.
label: string = "Badge"
variant: string = "neutral"
NoneNone
Banner
data-component="Banner"
Reusable banner component.
text: string = "Announcement"
href: string = ""
actionLabel: string = "Learn more"
variant: string = "brand"
NoneNone
BetaBadge
data-component="BetaBadge"
Reusable beta badge component.
label: string = "Beta"
variant: string = "default"
class: string = ""
defaultNone
CardSkeleton
data-component="CardSkeleton"
Reusable card skeleton component.
label: string = "Card"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
CertificationBadge
data-component="CertificationBadge"
Reusable certification badge component.
label: string = "Certification"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ChannelBadge
data-component="ChannelBadge"
Reusable channel badge component.
label: string = "Channel"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
CharacterCounter
data-component="CharacterCounter"
Reusable character counter component.
label: string = "Character"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ChartEmptyState
data-component="ChartEmptyState"
Reusable chart empty state component.
label: string = "ChartEmpty"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
CodeLanguageBadge
data-component="CodeLanguageBadge"
Reusable code language badge component.
label: string = "CodeLanguage"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ComingSoonBadge
data-component="ComingSoonBadge"
Reusable coming soon badge component.
label: string = "ComingSoon"
variant: string = "default"
class: string = ""
defaultNone
ComingSoonState
data-component="ComingSoonState"
Reusable coming soon state component.
label: string = "ComingSoon"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
CookieBanner
data-component="CookieBanner"
Reusable cookie banner component.
title: string = "We use cookies"
description: string = "We use essential cookies and optional analytics to improve your experience."
privacyHref: string = "/privacy"
Noneclick
Counter
data-component="Counter"
Reusable counter component.
label: string = "Status"
variant: string = "default"
class: string = ""
defaultNone
DeprecatedFeatureAlert
data-component="DeprecatedFeatureAlert"
Reusable deprecated feature alert component.
label: string = "DeprecatedFeature"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
EmptyState
data-component="EmptyState"
Reusable empty state component.
icon: string = "◇"
title: string = "Nothing here yet"
description: string = ""
actionLabel: string = ""
actionHref: string = "#"
NoneNone
ErrorState
data-component="ErrorState"
Reusable error state component.
code: string = "500"
title: string = "Something went wrong"
description: string = "Please try again."
actionLabel: string = "Try again"
actionHref: string = "/"
NoneNone
FeatureUnavailableState
data-component="FeatureUnavailableState"
Reusable feature unavailable state component.
label: string = "FeatureUnavailable"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
FileTypeBadge
data-component="FileTypeBadge"
Reusable file type badge component.
label: string = "FileType"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
FooterStatusIndicator
data-component="FooterStatusIndicator"
Reusable footer status indicator component.
label: string = "FooterStatus"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ForbiddenState
data-component="ForbiddenState"
Reusable forbidden state component.
label: string = "Forbidden"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
FormAlert
data-component="FormAlert"
Reusable form alert component.
label: string = "Form"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
GuideDifficultyBadge
data-component="GuideDifficultyBadge"
Reusable guide difficulty badge component.
label: string = "GuideDifficulty"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
HealthIndicator
data-component="HealthIndicator"
Reusable health indicator component.
label: string = "Health"
variant: string = "default"
class: string = ""
defaultNone
IncidentAlert
data-component="IncidentAlert"
Reusable incident alert component.
label: string = "Incident"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
IncidentBanner
data-component="IncidentBanner"
Reusable incident banner component.
label: string = "Incident"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
IncidentSeverityBadge
data-component="IncidentSeverityBadge"
Reusable incident severity badge component.
label: string = "IncidentSeverity"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
IndustryBadge
data-component="IndustryBadge"
Reusable industry badge component.
label: string = "Industry"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
InlineAlert
data-component="InlineAlert"
Reusable inline alert component.
label: string = "Inline"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
LegalAcceptanceNotice
data-component="LegalAcceptanceNotice"
Reusable legal acceptance notice component.
label: string = "LegalAcceptance"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
LegalNotice
data-component="LegalNotice"
Reusable legal notice component.
label: string = "Legal"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
LegalVersionBadge
data-component="LegalVersionBadge"
Reusable legal version badge component.
label: string = "LegalVersion"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
MaintenanceAlert
data-component="MaintenanceAlert"
Reusable maintenance alert component.
label: string = "Maintenance"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
MaintenanceBanner
data-component="MaintenanceBanner"
Reusable maintenance banner component.
label: string = "Maintenance"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
MaintenanceState
data-component="MaintenanceState"
Reusable maintenance state component.
label: string = "Maintenance"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
MessageCharacterCounter
data-component="MessageCharacterCounter"
Reusable message character counter component.
label: string = "MessageCharacter"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
NewBadge
data-component="NewBadge"
Reusable new badge component.
label: string = "New"
variant: string = "default"
class: string = ""
defaultNone
NoResultsState
data-component="NoResultsState"
Reusable no results state component.
label: string = "NoResults"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
NotFoundState
data-component="NotFoundState"
Reusable not found state component.
label: string = "NotFound"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
OfflineState
data-component="OfflineState"
Reusable offline state component.
label: string = "Offline"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
OnlineIndicator
data-component="OnlineIndicator"
Reusable online indicator component.
label: string = "Online"
variant: string = "default"
class: string = ""
defaultNone
OptionalIndicator
data-component="OptionalIndicator"
Reusable optional indicator component.
label: string = "Optional"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
PageAlert
data-component="PageAlert"
Reusable page alert component.
label: string = "Page"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
PageSkeleton
data-component="PageSkeleton"
Reusable page skeleton component.
label: string = "Page"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
PreviewBadge
data-component="PreviewBadge"
Reusable preview badge component.
label: string = "Preview"
variant: string = "default"
class: string = ""
defaultNone
PrivacyNotice
data-component="PrivacyNotice"
Reusable privacy notice component.
label: string = "Privacy"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ProductStatusBadge
data-component="ProductStatusBadge"
Reusable product status badge component.
label: string = "ProductStatus"
variant: string = "default"
class: string = ""
defaultNone
RateLimitedState
data-component="RateLimitedState"
Reusable rate limited state component.
label: string = "RateLimited"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
RegionalPrivacyBanner
data-component="RegionalPrivacyBanner"
Reusable regional privacy banner component.
label: string = "RegionalPrivacy"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
RegionUnavailableAlert
data-component="RegionUnavailableAlert"
Reusable region unavailable alert component.
label: string = "RegionUnavailable"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
RegionUnavailableState
data-component="RegionUnavailableState"
Reusable region unavailable state component.
label: string = "RegionUnavailable"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
RequiredIndicator
data-component="RequiredIndicator"
Reusable required indicator component.
label: string = "Required"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ResourceTypeBadge
data-component="ResourceTypeBadge"
Reusable resource type badge component.
label: string = "ResourceType"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
SearchEmptyState
data-component="SearchEmptyState"
Reusable search empty state component.
label: string = "SearchEmpty"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
SearchLoadingState
data-component="SearchLoadingState"
Reusable search loading state component.
label: string = "SearchLoading"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
SecurityAlert
data-component="SecurityAlert"
Reusable security alert component.
label: string = "Security"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
ServiceStatusBadge
data-component="ServiceStatusBadge"
Reusable service status badge component.
label: string = "ServiceStatus"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
Skeleton
data-component="Skeleton"
Reusable skeleton component.
height: string = "4"
rounded: string = "lg"
className: string = ""
NoneNone
SmsSegmentCounter
data-component="SmsSegmentCounter"
Reusable sms segment counter component.
label: string = "SmsSegment"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
StatusBadge
data-component="StatusBadge"
Reusable status badge component.
status: string = "operational"NoneNone
SuccessState
data-component="SuccessState"
Reusable success state component.
label: string = "Success"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
TableSkeleton
data-component="TableSkeleton"
Reusable table skeleton component.
label: string = "Table"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
TaxNotice
data-component="TaxNotice"
Reusable tax notice component.
label: string = "Tax"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
TextSkeleton
data-component="TextSkeleton"
Reusable text skeleton component.
label: string = "Text"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
TrendIndicator
data-component="TrendIndicator"
Reusable trend indicator component.
label: string = "Trend"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
UnavailableRegionState
data-component="UnavailableRegionState"
Reusable unavailable region state component.
label: string = "UnavailableRegion"
title: string = ""
description: string = ""
value: string = ""
variant: string = "default"
class: string = ""
defaultNone
VerifiedBadge
data-component="VerifiedBadge"
Reusable verified badge component.
label: string = "Verified"
variant: string = "default"
class: string = ""
defaultNone

Forms

ComponentPropsSlotsEvents
AddressInput
data-component="AddressInput"
Reusable address input component.
label: string = "Address"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
AmountInput
data-component="AmountInput"
Reusable amount input component.
label: string = "Amount"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ApartmentInput
data-component="ApartmentInput"
Reusable apartment input component.
label: string = "Apartment"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ApiKeyInput
data-component="ApiKeyInput"
Reusable api key input component.
label: string = "ApiKey"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
AttachmentPicker
data-component="AttachmentPicker"
Reusable attachment picker component.
label: string = "Attachment"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
AuthenticatorCodeInput
data-component="AuthenticatorCodeInput"
Reusable authenticator code input component.
label: string = "AuthenticatorCode"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
AvatarGroup
data-component="AvatarGroup"
Reusable avatar group component.
label: string = "Avatar"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
BillingPeriodToggle
data-component="BillingPeriodToggle"
Reusable billing period toggle component.
label: string = "BillingPeriod"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
BlackoutDatePicker
data-component="BlackoutDatePicker"
Reusable blackout date picker component.
label: string = "BlackoutDate"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
BorderRadiusPicker
data-component="BorderRadiusPicker"
Reusable border radius picker component.
label: string = "BorderRadius"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
BrandColorPicker
data-component="BrandColorPicker"
Reusable brand color picker component.
label: string = "BrandColor"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
BrandSelector
data-component="BrandSelector"
Reusable brand selector component.
label: string = "Brand"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
BudgetSelector
data-component="BudgetSelector"
Reusable budget selector component.
label: string = "Budget"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
BusinessHoursPicker
data-component="BusinessHoursPicker"
Reusable business hours picker component.
label: string = "BusinessHours"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ButtonGroup
data-component="ButtonGroup"
Reusable button group component.
label: string = "Button"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ButtonSelector
data-component="ButtonSelector"
Reusable button selector component.
label: string = "Button"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CallbackUrlInput
data-component="CallbackUrlInput"
Reusable callback url input component.
label: string = "CallbackUrl"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CaptchaField
data-component="CaptchaField"
Reusable captcha field component.
label: string = "Captcha"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CardSelector
data-component="CardSelector"
Reusable card selector component.
label: string = "Card"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ChannelSelector
data-component="ChannelSelector"
Reusable channel selector component.
label: string = "Channel"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CheckboxGroup
data-component="CheckboxGroup"
Reusable checkbox group component.
label: string = "Checkbox"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ChipInput
data-component="ChipInput"
Reusable chip input component.
label: string = "Chip"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CitySelector
data-component="CitySelector"
Reusable city selector component.
label: string = "City"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CodeInput
data-component="CodeInput"
Reusable code input component.
label: string = "Code"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ColorHexInput
data-component="ColorHexInput"
Reusable color hex input component.
label: string = "ColorHex"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ColorPicker
data-component="ColorPicker"
Reusable color picker component.
label: string = "Color"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ColorSelector
data-component="ColorSelector"
Reusable color selector component.
label: string = "Color"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CommandSearchInput
data-component="CommandSearchInput"
Reusable command search input component.
label: string = "CommandSearch"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CompanyNameInput
data-component="CompanyNameInput"
Reusable company name input component.
label: string = "CompanyName"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CompanySizeSelector
data-component="CompanySizeSelector"
Reusable company size selector component.
label: string = "CompanySize"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ComparisonDateRangePicker
data-component="ComparisonDateRangePicker"
Reusable comparison date range picker component.
label: string = "ComparisonDateRange"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ConfirmPasswordInput
data-component="ConfirmPasswordInput"
Reusable confirm password input component.
label: string = "ConfirmPassword"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CookieCategoryToggle
data-component="CookieCategoryToggle"
Reusable cookie category toggle component.
label: string = "CookieCategory"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CoordinatesInput
data-component="CoordinatesInput"
Reusable coordinates input component.
label: string = "Coordinates"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CoordinatesPicker
data-component="CoordinatesPicker"
Reusable coordinates picker component.
label: string = "Coordinates"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CopySecretField
data-component="CopySecretField"
Reusable copy secret field component.
label: string = "CopySecret"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CountryCallingCodeInput
data-component="CountryCallingCodeInput"
Reusable country calling code input component.
label: string = "CountryCallingCode"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CountryCallingCodeSelector
data-component="CountryCallingCodeSelector"
Reusable country calling code selector component.
label: string = "CountryCallingCode"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CountrySelector
data-component="CountrySelector"
Reusable country selector component.
label: string = "Country"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CouponInput
data-component="CouponInput"
Reusable coupon input component.
label: string = "Coupon"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CreditAmountInput
data-component="CreditAmountInput"
Reusable credit amount input component.
label: string = "CreditAmount"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CronInput
data-component="CronInput"
Reusable cron input component.
label: string = "Cron"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CurrencyInput
data-component="CurrencyInput"
Reusable currency input component.
label: string = "Currency"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CurrencySelector
data-component="CurrencySelector"
Reusable currency selector component.
label: string = "Currency"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
CurrentPasswordInput
data-component="CurrentPasswordInput"
Reusable current password input component.
label: string = "CurrentPassword"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
DateInput
data-component="DateInput"
Reusable date input component.
id: string = ""
name: string = ""
label: string = "Date"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
DatePicker
data-component="DatePicker"
Reusable date picker component.
id: string = "date"
name: string = "date"
label: string = "Date"
value: string = ""
min: string = ""
max: string = ""
required: boolean = false
NoneNone
DateRangePicker
data-component="DateRangePicker"
Reusable date range picker component.
label: string = "Date range"
startName: string = "startDate"
endName: string = "endDate"
NoneNone
DateTimeInput
data-component="DateTimeInput"
Reusable date time input component.
id: string = ""
name: string = ""
label: string = "DateTime"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
DateTimePicker
data-component="DateTimePicker"
Reusable date time picker component.
id: string = "datetime-picker"
name: string = "datetime"
label: string = "Date and time"
value: string = ""
min: string = ""
max: string = ""
required: boolean = false
disabled: boolean = false
class: string = ""
NoneNone
DateTimeRangePicker
data-component="DateTimeRangePicker"
Reusable date time range picker component.
label: string = "DateTimeRange"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
DecimalInput
data-component="DecimalInput"
Reusable decimal input component.
label: string = "Decimal"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
DepartmentInput
data-component="DepartmentInput"
Reusable department input component.
label: string = "Department"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
DiscountInput
data-component="DiscountInput"
Reusable discount input component.
label: string = "Discount"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
DisplayNameInput
data-component="DisplayNameInput"
Reusable display name input component.
label: string = "DisplayName"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
DomainInput
data-component="DomainInput"
Reusable domain input component.
label: string = "Domain"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
DurationInput
data-component="DurationInput"
Reusable duration input component.
label: string = "Duration"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
DurationPicker
data-component="DurationPicker"
Reusable duration picker component.
label: string = "Duration"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
EmailBodyEditor
data-component="EmailBodyEditor"
Reusable email body editor component.
label: string = "EmailBody"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
EmailInput
data-component="EmailInput"
Reusable email input component.
id: string = ""
name: string = ""
label: string = "Email"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
EmojiPicker
data-component="EmojiPicker"
Reusable emoji picker component.
label: string = "Emoji"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
EnvironmentSelector
data-component="EnvironmentSelector"
Reusable environment selector component.
label: string = "Environment"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ExpiryDateTimePicker
data-component="ExpiryDateTimePicker"
Reusable expiry date time picker component.
label: string = "ExpiryDateTime"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
FaxInput
data-component="FaxInput"
Reusable fax input component.
label: string = "Fax"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
FileInput
data-component="FileInput"
Reusable file input component.
label: string = "File"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
FileSizeInput
data-component="FileSizeInput"
Reusable file size input component.
label: string = "FileSize"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
FilterSearchInput
data-component="FilterSearchInput"
Reusable filter search input component.
label: string = "FilterSearch"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
FirstNameInput
data-component="FirstNameInput"
Reusable first name input component.
label: string = "FirstName"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
FontPicker
data-component="FontPicker"
Reusable font picker component.
label: string = "Font"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
FontSizePicker
data-component="FontSizePicker"
Reusable font size picker component.
label: string = "FontSize"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
FontWeightPicker
data-component="FontWeightPicker"
Reusable font weight picker component.
label: string = "FontWeight"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
FormField
data-component="FormField"
Reusable form field component.
label: string = "Field"
help: string = ""
error: string = ""
required: boolean = false
defaultNone
FormGroup
data-component="FormGroup"
Reusable form group component.
label: string = "Form"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
GeofenceEditor
data-component="GeofenceEditor"
Reusable geofence editor component.
label: string = "Geofence"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
GradientPicker
data-component="GradientPicker"
Reusable gradient picker component.
label: string = "Gradient"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
GradientStopEditor
data-component="GradientStopEditor"
Reusable gradient stop editor component.
label: string = "GradientStop"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
HexColorInput
data-component="HexColorInput"
Reusable hex color input component.
label: string = "HexColor"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
HiddenField
data-component="HiddenField"
Reusable hidden field component.
label: string = "Hidden"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
HostnameInput
data-component="HostnameInput"
Reusable hostname input component.
label: string = "Hostname"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
HourPicker
data-component="HourPicker"
Reusable hour picker component.
label: string = "Hour"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
HslColorInput
data-component="HslColorInput"
Reusable hsl color input component.
label: string = "HslColor"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
HtmlEditor
data-component="HtmlEditor"
Reusable html editor component.
label: string = "Html"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
IconPicker
data-component="IconPicker"
Reusable icon picker component.
label: string = "Icon"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
IconSelector
data-component="IconSelector"
Reusable icon selector component.
label: string = "Icon"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
IdentifierInput
data-component="IdentifierInput"
Reusable identifier input component.
label: string = "Identifier"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ImageEditor
data-component="ImageEditor"
Reusable image editor component.
label: string = "Image"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ImageSelector
data-component="ImageSelector"
Reusable image selector component.
label: string = "Image"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
IndustrySelector
data-component="IndustrySelector"
Reusable industry selector component.
label: string = "Industry"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
InputGroup
data-component="InputGroup"
Reusable input group component.
label: string = "Input"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
IntegerInput
data-component="IntegerInput"
Reusable integer input component.
label: string = "Integer"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
IpAddressInput
data-component="IpAddressInput"
Reusable ip address input component.
label: string = "IpAddress"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
JobTitleInput
data-component="JobTitleInput"
Reusable job title input component.
label: string = "JobTitle"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
JsonInput
data-component="JsonInput"
Reusable json input component.
label: string = "Json"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LanguageSelector
data-component="LanguageSelector"
Reusable language selector component.
label: string = "Language"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LastNameInput
data-component="LastNameInput"
Reusable last name input component.
label: string = "LastName"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LatitudeInput
data-component="LatitudeInput"
Reusable latitude input component.
label: string = "Latitude"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LegalLanguageSelector
data-component="LegalLanguageSelector"
Reusable legal language selector component.
label: string = "LegalLanguage"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LegalRegionSelector
data-component="LegalRegionSelector"
Reusable legal region selector component.
label: string = "LegalRegion"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LetterSpacingPicker
data-component="LetterSpacingPicker"
Reusable letter spacing picker component.
label: string = "LetterSpacing"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LicenseKeyInput
data-component="LicenseKeyInput"
Reusable license key input component.
label: string = "LicenseKey"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LineHeightPicker
data-component="LineHeightPicker"
Reusable line height picker component.
label: string = "LineHeight"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LocaleSelector
data-component="LocaleSelector"
Reusable locale selector component.
label: string = "Locale"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LocationPicker
data-component="LocationPicker"
Reusable location picker component.
label: string = "Location"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
LongitudeInput
data-component="LongitudeInput"
Reusable longitude input component.
label: string = "Longitude"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MaintenanceWindowPicker
data-component="MaintenanceWindowPicker"
Reusable maintenance window picker component.
label: string = "MaintenanceWindow"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MapPicker
data-component="MapPicker"
Reusable map picker component.
label: string = "Map"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MarkdownEditor
data-component="MarkdownEditor"
Reusable markdown editor component.
label: string = "Markdown"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MaskedSecretField
data-component="MaskedSecretField"
Reusable masked secret field component.
label: string = "MaskedSecret"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MentionInput
data-component="MentionInput"
Reusable mention input component.
label: string = "Mention"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MessageLimitInput
data-component="MessageLimitInput"
Reusable message limit input component.
label: string = "MessageLimit"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MinutePicker
data-component="MinutePicker"
Reusable minute picker component.
label: string = "Minute"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MobileInput
data-component="MobileInput"
Reusable mobile input component.
label: string = "Mobile"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MonthlyVolumeSelector
data-component="MonthlyVolumeSelector"
Reusable monthly volume selector component.
label: string = "MonthlyVolume"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MonthPicker
data-component="MonthPicker"
Reusable month picker component.
label: string = "Month"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MonthYearPicker
data-component="MonthYearPicker"
Reusable month year picker component.
label: string = "MonthYear"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
MultipleEmailInput
data-component="MultipleEmailInput"
Reusable multiple email input component.
label: string = "MultipleEmail"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
NameInput
data-component="NameInput"
Reusable name input component.
label: string = "Name"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
NewPasswordInput
data-component="NewPasswordInput"
Reusable new password input component.
label: string = "NewPassword"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
NumberInput
data-component="NumberInput"
Reusable number input component.
id: string = ""
name: string = ""
label: string = "Number"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
OrganizationSelector
data-component="OrganizationSelector"
Reusable organization selector component.
label: string = "Organization"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
OtpInput
data-component="OtpInput"
Reusable otp input component.
name: string = "otp"
length: number = 6
label: string = "Verification code"
NoneNone
PasswordInput
data-component="PasswordInput"
Reusable password input component.
id: string = ""
name: string = ""
label: string = "Password"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
PasswordVisibilityToggle
data-component="PasswordVisibilityToggle"
Reusable password visibility toggle component.
label: string = "PasswordVisibility"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PathInput
data-component="PathInput"
Reusable path input component.
label: string = "Path"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PercentageInput
data-component="PercentageInput"
Reusable percentage input component.
label: string = "Percentage"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PermissionSelector
data-component="PermissionSelector"
Reusable permission selector component.
label: string = "Permission"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PhoneInput
data-component="PhoneInput"
Reusable phone input component.
id: string = ""
name: string = ""
label: string = "Phone"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
PinInput
data-component="PinInput"
Reusable pin input component.
label: string = "Pin"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PlainTextEditor
data-component="PlainTextEditor"
Reusable plain text editor component.
label: string = "PlainText"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PlanSelector
data-component="PlanSelector"
Reusable plan selector component.
label: string = "Plan"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PortInput
data-component="PortInput"
Reusable port input component.
label: string = "Port"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PortNumberInput
data-component="PortNumberInput"
Reusable port number input component.
label: string = "PortNumber"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PositiveNumberInput
data-component="PositiveNumberInput"
Reusable positive number input component.
label: string = "PositiveNumber"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PostalCodeInput
data-component="PostalCodeInput"
Reusable postal code input component.
label: string = "PostalCode"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PresetDateRangePicker
data-component="PresetDateRangePicker"
Reusable preset date range picker component.
label: string = "PresetDateRange"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PriceInput
data-component="PriceInput"
Reusable price input component.
label: string = "Price"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PricingFeatureGroup
data-component="PricingFeatureGroup"
Reusable pricing feature group component.
label: string = "PricingFeature"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PricingToggle
data-component="PricingToggle"
Reusable pricing toggle component.
label: string = "Pricing"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PrioritySelector
data-component="PrioritySelector"
Reusable priority selector component.
label: string = "Priority"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ProductSelector
data-component="ProductSelector"
Reusable product selector component.
label: string = "Product"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ProjectSelector
data-component="ProjectSelector"
Reusable project selector component.
label: string = "Project"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PromoCodeInput
data-component="PromoCodeInput"
Reusable promo code input component.
label: string = "PromoCode"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ProviderSelector
data-component="ProviderSelector"
Reusable provider selector component.
label: string = "Provider"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PublishDateTimePicker
data-component="PublishDateTimePicker"
Reusable publish date time picker component.
label: string = "PublishDateTime"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
PushNotificationEditor
data-component="PushNotificationEditor"
Reusable push notification editor component.
label: string = "PushNotification"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
QuantityInput
data-component="QuantityInput"
Reusable quantity input component.
label: string = "Quantity"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
QuietHoursPicker
data-component="QuietHoursPicker"
Reusable quiet hours picker component.
label: string = "Quiet hours"
startName: string = "quietStart"
endName: string = "quietEnd"
start: string = "22:00"
end: string = "08:00"
timezone: string = "UTC"
disabled: boolean = false
class: string = ""
NoneNone
RadioGroup
data-component="RadioGroup"
Reusable radio group component.
label: string = "Choose one"
name: string = "choice"
defaultNone
RangeInput
data-component="RangeInput"
Reusable range input component.
label: string = "Range"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RateLimitInput
data-component="RateLimitInput"
Reusable rate limit input component.
label: string = "RateLimit"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RecipientSelector
data-component="RecipientSelector"
Reusable recipient selector component.
label: string = "Recipient"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RecoveryCodeInput
data-component="RecoveryCodeInput"
Reusable recovery code input component.
label: string = "RecoveryCode"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RecurringSchedulePicker
data-component="RecurringSchedulePicker"
Reusable recurring schedule picker component.
id: string = "recurring-schedule"
name: string = "recurrence"
label: string = "Repeat"
value: string = "none"
disabled: boolean = false
class: string = ""
NoneNone
RedirectUriInput
data-component="RedirectUriInput"
Reusable redirect uri input component.
label: string = "RedirectUri"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ReferenceInput
data-component="ReferenceInput"
Reusable reference input component.
label: string = "Reference"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RegexInput
data-component="RegexInput"
Reusable regex input component.
label: string = "Regex"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RegionSelector
data-component="RegionSelector"
Reusable region selector component.
label: string = "Region"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RetryCountInput
data-component="RetryCountInput"
Reusable retry count input component.
label: string = "RetryCount"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RgbColorInput
data-component="RgbColorInput"
Reusable rgb color input component.
label: string = "RgbColor"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RichTextEditor
data-component="RichTextEditor"
Reusable rich text editor component.
label: string = "RichText"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RichTextInput
data-component="RichTextInput"
Reusable rich text input component.
label: string = "RichText"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RoleSelector
data-component="RoleSelector"
Reusable role selector component.
label: string = "Role"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
RollingDateRangePicker
data-component="RollingDateRangePicker"
Reusable rolling date range picker component.
label: string = "RollingDateRange"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SavedFilterSelector
data-component="SavedFilterSelector"
Reusable saved filter selector component.
label: string = "SavedFilter"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ScheduledDateTimePicker
data-component="ScheduledDateTimePicker"
Reusable scheduled date time picker component.
label: string = "ScheduledDateTime"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ScheduleMessagePicker
data-component="ScheduleMessagePicker"
Reusable schedule message picker component.
label: string = "ScheduleMessage"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SchedulePicker
data-component="SchedulePicker"
Reusable schedule picker component.
label: string = "Schedule"NoneNone
SdkLanguageSelector
data-component="SdkLanguageSelector"
Reusable sdk language selector component.
label: string = "SdkLanguage"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SearchInput
data-component="SearchInput"
Reusable search input component.
id: string = ""
name: string = ""
label: string = "Search"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
SecondPicker
data-component="SecondPicker"
Reusable second picker component.
label: string = "Second"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SecretInput
data-component="SecretInput"
Reusable secret input component.
label: string = "Secret"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SenderIdInput
data-component="SenderIdInput"
Reusable sender id input component.
label: string = "SenderId"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SeveritySelector
data-component="SeveritySelector"
Reusable severity selector component.
label: string = "Severity"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ShadowPicker
data-component="ShadowPicker"
Reusable shadow picker component.
label: string = "Shadow"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SlugInput
data-component="SlugInput"
Reusable slug input component.
label: string = "Slug"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SmsMessageEditor
data-component="SmsMessageEditor"
Reusable sms message editor component.
label: string = "SmsMessage"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
StateSelector
data-component="StateSelector"
Reusable state selector component.
label: string = "State"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
StatusSelector
data-component="StatusSelector"
Reusable status selector component.
label: string = "Status"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
StepperInput
data-component="StepperInput"
Reusable stepper input component.
label: string = "Stepper"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
StickerPicker
data-component="StickerPicker"
Reusable sticker picker component.
label: string = "Sticker"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
StreetAddressInput
data-component="StreetAddressInput"
Reusable street address input component.
label: string = "StreetAddress"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SubdomainInput
data-component="SubdomainInput"
Reusable subdomain input component.
label: string = "Subdomain"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
SubjectInput
data-component="SubjectInput"
Reusable subject input component.
label: string = "Subject"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TagInput
data-component="TagInput"
Reusable tag input component.
label: string = "Tag"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TaxRateInput
data-component="TaxRateInput"
Reusable tax rate input component.
label: string = "TaxRate"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TeamSizeSelector
data-component="TeamSizeSelector"
Reusable team size selector component.
label: string = "TeamSize"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TemplateSelector
data-component="TemplateSelector"
Reusable template selector component.
label: string = "Template"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TemplateVariableInput
data-component="TemplateVariableInput"
Reusable template variable input component.
label: string = "TemplateVariable"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TextInput
data-component="TextInput"
Reusable text input component.
id: string = ""
name: string = ""
label: string = "Text"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
ThemeColorPicker
data-component="ThemeColorPicker"
Reusable theme color picker component.
label: string = "ThemeColor"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TimeInput
data-component="TimeInput"
Reusable time input component.
id: string = ""
name: string = ""
label: string = "Time"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
TimeoutInput
data-component="TimeoutInput"
Reusable timeout input component.
label: string = "Timeout"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TimePicker
data-component="TimePicker"
Reusable time picker component.
id: string = "time-picker"
name: string = "time"
label: string = "Time"
value: string = ""
min: string = ""
max: string = ""
step: number = 60
required: boolean = false
disabled: boolean = false
class: string = ""
NoneNone
TimeRangePicker
data-component="TimeRangePicker"
Reusable time range picker component.
label: string = "TimeRange"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TimezoneAwareTimePicker
data-component="TimezoneAwareTimePicker"
Reusable timezone aware time picker component.
label: string = "TimezoneAwareTime"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TimezoneSelector
data-component="TimezoneSelector"
Reusable timezone selector component.
id: string = "timezone"
name: string = "timezone"
label: string = "Timezone"
NoneNone
Toggle
data-component="Toggle"
Reusable toggle component.
label: string = ""
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
ToggleGroup
data-component="ToggleGroup"
Reusable toggle group component.
label: string = "Toggle"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
TokenInput
data-component="TokenInput"
Reusable token input component.
label: string = "Token"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
UrlInput
data-component="UrlInput"
Reusable url input component.
id: string = ""
name: string = ""
label: string = "Url"
value: string = ""
placeholder: string = ""
help: string = ""
error: string = ""
required: boolean = false
disabled: boolean = false
readonly: boolean = false
autocomplete: string = ""
NoneNone
UseCaseSelector
data-component="UseCaseSelector"
Reusable use case selector component.
label: string = "UseCase"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
UsernameInput
data-component="UsernameInput"
Reusable username input component.
label: string = "Username"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
VerificationCodeInput
data-component="VerificationCodeInput"
Reusable verification code input component.
label: string = "VerificationCode"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
VersionSelector
data-component="VersionSelector"
Reusable version selector component.
label: string = "Version"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
VoiceScriptEditor
data-component="VoiceScriptEditor"
Reusable voice script editor component.
label: string = "VoiceScript"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
VolumeInput
data-component="VolumeInput"
Reusable volume input component.
label: string = "Volume"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
WebhookUrlInput
data-component="WebhookUrlInput"
Reusable webhook url input component.
label: string = "WebhookUrl"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
WhatsAppNumberInput
data-component="WhatsAppNumberInput"
Reusable whats app number input component.
label: string = "WhatsAppNumber"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
WhatsAppTemplateEditor
data-component="WhatsAppTemplateEditor"
Reusable whats app template editor component.
label: string = "WhatsAppTemplate"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
WorkspaceSelector
data-component="WorkspaceSelector"
Reusable workspace selector component.
label: string = "Workspace"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone
YearPicker
data-component="YearPicker"
Reusable year picker component.
label: string = "Year"
name: string = ""
value: string = ""
placeholder: string = ""
type: string = "text"
required: boolean = false
disabled: boolean = false
readonly: boolean = false
help: string = ""
error: string = ""
class: string = ""
defaultNone

Layout

ComponentPropsSlotsEvents
AnchorNavigation
data-component="AnchorNavigation"
Reusable anchor navigation component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
AppHeader
data-component="AppHeader"
Reusable app header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ArchitectureSection
data-component="ArchitectureSection"
Reusable architecture section component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ArticleHero
data-component="ArticleHero"
Reusable article hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ArticleLayout
data-component="ArticleLayout"
Reusable article layout component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ArticlePageShell
data-component="ArticlePageShell"
Reusable article page shell component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
BottomNavigation
data-component="BottomNavigation"
Reusable bottom navigation component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
BrowserFrame
data-component="BrowserFrame"
Reusable browser frame component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
CalendarHeader
data-component="CalendarHeader"
Reusable calendar header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
CalendarNavigation
data-component="CalendarNavigation"
Reusable calendar navigation component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
CaseStudyHero
data-component="CaseStudyHero"
Reusable case study hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
CenteredHero
data-component="CenteredHero"
Reusable centered hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
CenteredSectionHeader
data-component="CenteredSectionHeader"
Reusable centered section header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ChallengeSection
data-component="ChallengeSection"
Reusable challenge section component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
CodeHeader
data-component="CodeHeader"
Reusable code header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
CompanyHero
data-component="CompanyHero"
Reusable company hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
CompanyPageShell
data-component="CompanyPageShell"
Reusable company page shell component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ContactHero
data-component="ContactHero"
Reusable contact hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ContactPageShell
data-component="ContactPageShell"
Reusable contact page shell component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
CTASection
data-component="CTASection"
Reusable c t a section component.
eyebrow: string = "Ready?"
title: string = "Start building today"
description: string = ""
primaryLabel: string = "Get started"
primaryHref: string = "#"
secondaryLabel: string = "Contact sales"
secondaryHref: string = "#"
NoneNone
DesktopNavigation
data-component="DesktopNavigation"
Reusable desktop navigation component.
label: string = "Primary navigation"
items: string = []
class: string = ""
NoneNone
DeveloperHero
data-component="DeveloperHero"
Reusable developer hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
DeveloperPageShell
data-component="DeveloperPageShell"
Reusable developer page shell component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
DropdownNavigation
data-component="DropdownNavigation"
Reusable dropdown navigation component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
EnterpriseHero
data-component="EnterpriseHero"
Reusable enterprise hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ErrorHero
data-component="ErrorHero"
Reusable error hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ErrorPageShell
data-component="ErrorPageShell"
Reusable error page shell component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
FeatureDetailsPanel
data-component="FeatureDetailsPanel"
Reusable feature details panel component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
FormSection
data-component="FormSection"
Reusable form section component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
Header
data-component="Header"
Reusable header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
Hero
data-component="Hero"
Reusable hero component.
eyebrow: string = ""
title: string = "Build faster with WRNexusJS"
highlight: string = ""
description: string = ""
primaryLabel: string = "Get started"
primaryHref: string = "#"
secondaryLabel: string = "Learn more"
secondaryHref: string = "#"
align: string = "center"
defaultNone
HeroCodePanel
data-component="HeroCodePanel"
Reusable hero code panel component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
InsetPanel
data-component="InsetPanel"
Reusable inset panel component.
class: string = ""defaultNone
LegalDocumentHeader
data-component="LegalDocumentHeader"
Reusable legal document header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
LegalDocumentLayout
data-component="LegalDocumentLayout"
Reusable legal document layout component.
title: string = "Legal document"
effectiveDate: string = ""
updatedDate: string = ""
toc
default
None
LegalHero
data-component="LegalHero"
Reusable legal hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
LegalPageShell
data-component="LegalPageShell"
Reusable legal page shell component.
class: string = ""navigation
default
None
LegalSection
data-component="LegalSection"
Reusable legal section component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
MarketingPageShell
data-component="MarketingPageShell"
Reusable marketing page shell component.
class: string = ""defaultNone
MarketingSectionHeader
data-component="MarketingSectionHeader"
Reusable marketing section header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
MissionSection
data-component="MissionSection"
Reusable mission section component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
MobileDeviceFrame
data-component="MobileDeviceFrame"
Reusable mobile device frame component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
MobileNavigation
data-component="MobileNavigation"
Reusable mobile navigation component.
label: string = "Menu"
closeLabel: string = "Close menu"
items: string = []
class: string = ""
Noneclick
Navigation
data-component="Navigation"
Reusable navigation component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
Panel
data-component="Panel"
Reusable panel component.
class: string = ""defaultNone
PreviousNextNavigation
data-component="PreviousNextNavigation"
Reusable previous next navigation component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
PricingHero
data-component="PricingHero"
Reusable pricing hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ProductCategorySection
data-component="ProductCategorySection"
Reusable product category section component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ProductHero
data-component="ProductHero"
Reusable product hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ProductPageShell
data-component="ProductPageShell"
Reusable product page shell component.
class: string = ""defaultNone
PublicHeader
data-component="PublicHeader"
Reusable public header component.
brand: string = "WRNexusJS"
homeHref: string = "/"
signInHref: string = "/signin"
ctaHref: string = "/start"
ctaLabel: string = "Get started"
default
mobile
click
PublicPageShell
data-component="PublicPageShell"
Reusable public page shell component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ResizablePanel
data-component="ResizablePanel"
Reusable resizable panel component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ResourcePageShell
data-component="ResourcePageShell"
Reusable resource page shell component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ResultsSection
data-component="ResultsSection"
Reusable results section component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
ScreenshotFrame
data-component="ScreenshotFrame"
Reusable screenshot frame component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
Section
data-component="Section"
Reusable section component.
id: string = ""
size: string = "default"
surface: string = "default"
className: string = ""
defaultNone
SectionHeader
data-component="SectionHeader"
Reusable section header component.
eyebrow: string = ""
title: string = "Section title"
description: string = ""
align: string = "left"
defaultNone
SecurityHero
data-component="SecurityHero"
Reusable security hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
SidebarLayout
data-component="SidebarLayout"
Reusable sidebar layout component.
class: string = ""defaultNone
SidePanel
data-component="SidePanel"
Reusable side panel component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
SolutionHero
data-component="SolutionHero"
Reusable solution hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
SolutionPageShell
data-component="SolutionPageShell"
Reusable solution page shell component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
SolutionSection
data-component="SolutionSection"
Reusable solution section component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
SplitHero
data-component="SplitHero"
Reusable split hero component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
SplitLayout
data-component="SplitLayout"
Reusable split layout component.
class: string = ""defaultNone
SplitSectionHeader
data-component="SplitSectionHeader"
Reusable split section header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
StatusPageShell
data-component="StatusPageShell"
Reusable status page shell component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
StepNavigation
data-component="StepNavigation"
Reusable step navigation component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
StickyLayout
data-component="StickyLayout"
Reusable sticky layout component.
class: string = ""defaultNone
TableHeader
data-component="TableHeader"
Reusable table header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
VisionSection
data-component="VisionSection"
Reusable vision section component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
WizardHeader
data-component="WizardHeader"
Reusable wizard header component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone
WizardNavigation
data-component="WizardNavigation"
Reusable wizard navigation component.
eyebrow: string = ""
title: string = ""
description: string = ""
align: string = "start"
class: string = ""
defaultNone

Overlays

ComponentPropsSlotsEvents
AccessibleDialog
data-component="AccessibleDialog"
Reusable accessible dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
AccessibleMenu
data-component="AccessibleMenu"
Reusable accessible menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
AccountMenu
data-component="AccountMenu"
Reusable account menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
ActionMenu
data-component="ActionMenu"
Reusable action menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
AlertDialog
data-component="AlertDialog"
Reusable alert dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
ApiKeyCreateDialog
data-component="ApiKeyCreateDialog"
Reusable api key create dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
CommandMenu
data-component="CommandMenu"
Reusable command menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
ConfirmationDialog
data-component="ConfirmationDialog"
Reusable confirmation dialog component.
title: string = "Confirm action"
description: string = "Are you sure you want to continue?"
confirmLabel: string = "Confirm"
cancelLabel: string = "Cancel"
danger: boolean = false
open: boolean = false
class: string = ""
confirmclick
ContextMenu
data-component="ContextMenu"
Reusable context menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
CookiePreferencesDialog
data-component="CookiePreferencesDialog"
Reusable cookie preferences dialog component.
title: string = "Cookie preferences"
description: string = "Choose which optional cookies you allow. Essential cookies are always enabled."
saveLabel: string = "Save preferences"
acceptLabel: string = "Accept all"
rejectLabel: string = "Reject optional"
open: boolean = false
class: string = ""
Nonechange
click
DeleteConfirmationDialog
data-component="DeleteConfirmationDialog"
Reusable delete confirmation dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
DevelopersMenu
data-component="DevelopersMenu"
Reusable developers menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
DropdownMenu
data-component="DropdownMenu"
Reusable dropdown menu component.
label: string = "Menu"defaultclick
FilterMenu
data-component="FilterMenu"
Reusable filter menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
FormDialog
data-component="FormDialog"
Reusable form dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
FullscreenDialog
data-component="FullscreenDialog"
Reusable fullscreen dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
ImagePreviewDialog
data-component="ImagePreviewDialog"
Reusable image preview dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
Lightbox
data-component="Lightbox"
Reusable lightbox component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
LogoutDialog
data-component="LogoutDialog"
Reusable logout dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
MegaMenu
data-component="MegaMenu"
Reusable mega menu component.
label: string = "Explore"
sections: string = []
class: string = ""
Noneclick
NavigationMegaMenu
data-component="NavigationMegaMenu"
Reusable navigation mega menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
Popover
data-component="Popover"
Reusable popover component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
ProductsMegaMenu
data-component="ProductsMegaMenu"
Reusable products mega menu component.
label: string = "Products"
sections: string = []
class: string = ""
NoneNone
PromptDialog
data-component="PromptDialog"
Reusable prompt dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
ResourcesMegaMenu
data-component="ResourcesMegaMenu"
Reusable resources mega menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
SearchDialog
data-component="SearchDialog"
Reusable search dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
SecretRevealDialog
data-component="SecretRevealDialog"
Reusable secret reveal dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
SessionExpiredDialog
data-component="SessionExpiredDialog"
Reusable session expired dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
SolutionsMegaMenu
data-component="SolutionsMegaMenu"
Reusable solutions mega menu component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
StepUpAuthenticationDialog
data-component="StepUpAuthenticationDialog"
Reusable step up authentication dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
TestMessageDialog
data-component="TestMessageDialog"
Reusable test message dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
UnsavedChangesDialog
data-component="UnsavedChangesDialog"
Reusable unsaved changes dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone
VideoPreviewDialog
data-component="VideoPreviewDialog"
Reusable video preview dialog component.
title: string = ""
description: string = ""
open: boolean = false
closeLabel: string = "Close"
class: string = ""
defaultNone

Visualization

ComponentPropsSlotsEvents
AreaChart
data-component="AreaChart"
Reusable area chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
BarChart
data-component="BarChart"
Reusable bar chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
CampaignProgress
data-component="CampaignProgress"
Reusable campaign progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ChannelComparisonChart
data-component="ChannelComparisonChart"
Reusable channel comparison chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ChannelFallbackDiagram
data-component="ChannelFallbackDiagram"
Reusable channel fallback diagram component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ChannelFlow
data-component="ChannelFlow"
Reusable channel flow component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ChecklistProgress
data-component="ChecklistProgress"
Reusable checklist progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
CircularProgress
data-component="CircularProgress"
Reusable circular progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
CohortChart
data-component="CohortChart"
Reusable cohort chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
CompletionMeter
data-component="CompletionMeter"
Reusable completion meter component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ConversionChart
data-component="ConversionChart"
Reusable conversion chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
CostBreakdownChart
data-component="CostBreakdownChart"
Reusable cost breakdown chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
DeliveryStatusChart
data-component="DeliveryStatusChart"
Reusable delivery status chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
DeliveryStatusTimeline
data-component="DeliveryStatusTimeline"
Reusable delivery status timeline component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
DonutChart
data-component="DonutChart"
Reusable donut chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
EncryptionDiagram
data-component="EncryptionDiagram"
Reusable encryption diagram component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ExportProgress
data-component="ExportProgress"
Reusable export progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
FallbackRouteDiagram
data-component="FallbackRouteDiagram"
Reusable fallback route diagram component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
FeatureTimeline
data-component="FeatureTimeline"
Reusable feature timeline component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
FormProgress
data-component="FormProgress"
Reusable form progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
FunnelChart
data-component="FunnelChart"
Reusable funnel chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
GeoChart
data-component="GeoChart"
Reusable geo chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ImportProgress
data-component="ImportProgress"
Reusable import progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
IncidentResponseFlow
data-component="IncidentResponseFlow"
Reusable incident response flow component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
IncidentTimeline
data-component="IncidentTimeline"
Reusable incident timeline component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
JobProgress
data-component="JobProgress"
Reusable job progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
LatencyMetric
data-component="LatencyMetric"
Reusable latency metric component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
LineChart
data-component="LineChart"
Reusable line chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
Metric
data-component="Metric"
Reusable metric component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
OnboardingProgress
data-component="OnboardingProgress"
Reusable onboarding progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
PasswordStrengthMeter
data-component="PasswordStrengthMeter"
Reusable password strength meter component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
PieChart
data-component="PieChart"
Reusable pie chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ProductArchitectureDiagram
data-component="ProductArchitectureDiagram"
Reusable product architecture diagram component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ProgressChart
data-component="ProgressChart"
Reusable progress chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ProgressRing
data-component="ProgressRing"
Reusable progress ring component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
RevenueChart
data-component="RevenueChart"
Reusable revenue chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
SmartRouteDiagram
data-component="SmartRouteDiagram"
Reusable smart route diagram component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
TenantIsolationDiagram
data-component="TenantIsolationDiagram"
Reusable tenant isolation diagram component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
Timeline
data-component="Timeline"
Reusable timeline component.
title: string = "Timeline"defaultNone
TimelineChart
data-component="TimelineChart"
Reusable timeline chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
ToastProgress
data-component="ToastProgress"
Reusable toast progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
UploadProgress
data-component="UploadProgress"
Reusable upload progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
UptimeChart
data-component="UptimeChart"
Reusable uptime chart component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
UptimeMetric
data-component="UptimeMetric"
Reusable uptime metric component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
WebhookFlowDiagram
data-component="WebhookFlowDiagram"
Reusable webhook flow diagram component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
WorkflowProgress
data-component="WorkflowProgress"
Reusable workflow progress component.
title: string = ""
value: string = ""
description: string = ""
summary: string = ""
loading: boolean = false
class: string = ""
defaultNone
} }