Design System – Knowivate™
Signin
Back to v1Go to Guidelines

References

Component API reference for v1 — usage examples, variants, sizes, and code snippets.

On this page

Buttons#

Use the unified V1Button component to trigger actions or navigate. Supports multiple variants, sizes, and icon positions.

Variants#

Usage (React)
import { V1PrimaryButton, V1SecondaryButton } from "knowivate-ui/v1-button";

<V1PrimaryButton>Primary</V1PrimaryButton>
<V1SecondaryButton>Secondary</V1SecondaryButton>

States#

<V1PrimaryButton disabled>Disabled</V1PrimaryButton>
<V1PrimaryButton loading>Loading</V1PrimaryButton>

Sizes#

import { V1Button } from "knowivate-ui/v1-button";

<V1Button variant="primary" size="xs">Extra Small</V1Button>
<V1Button variant="primary" size="md">Medium</V1Button>
<V1Button variant="primary" size="xl">Extra Large</V1Button>

Switch#

A toggle switch component used for boolean settings or states.

Examples#

Push Notifications

Receive notifications about events.

Marketing Emails

Receive emails about new products, features, and more.

Usage (React)
import { V1Switch } from "knowivate-ui/v1-switch";
import { useState } from "react";

export default function Example() {
  const [enabled, setEnabled] = useState(false);
  
  return (
    <V1Switch 
      checked={enabled} 
      onChange={(e) => setEnabled(e.target.checked)} 
    />
  );
}

V1LabelWithBeta#

A v1 component that automatically styles (Beta) suffixes as consistent blue superscripts. Import it from knowivate-ui as V1LabelWithBeta.

Example#

Advanced Reports Beta
Usage (React)
import { V1LabelWithBeta } from "knowivate-ui";

// V1LabelWithBeta — renders "(Beta)" as a blue superscript
<V1LabelWithBeta label="Advanced Reports (Beta)" />

V1StickyBackButton#

A standardized sticky header for back navigation that integrates with the Knowivate navbar design. It features glassmorphism with backdrop blur.

Example#

Note: The example below is a static preview. The actual component uses sticky positioning and will float at the top of the viewport when implemented in a page.

This preview is a manually written mock to demonstrate the UI design without affecting the documentation page's layout.

Back to Products
Go to News
Content area (Centered via Container)
Usage (React)
import { V1StickyBackButton } from "knowivate-ui";

// Basic usage (Container is ON by default to align with page content)
<V1StickyBackButton 
  href="/v1" 
  label="Back to v1" 
/>

// Advanced usage with secondary action and full-width (Wide screens)
<V1StickyBackButton 
  href="/v1" 
  label="Back to v1"
  isContainer={false} // Full width
  secondaryLabel="Go to Live Site"
  secondaryHref="https://knowivate.com"
  secondaryTarget="_blank"
/>

V1Badge#

A premium status pill used for hero sections, feature highlights, or state indications.

Variants#

Neutral (Design System)
Premium (Products)
Usage (React)
import { V1Badge } from "knowivate-ui";

<V1Badge variant="secondary">Default Label</V1Badge>
<V1Badge variant="primary">Highlight Label</V1Badge>
v1 References – Knowivate™