HelpTribe.
Home
HT|UI
GitHub

Button

Primary call-to-action component. Electric Violet with white text, sharp 4px corners, and uppercase tracking.

Installation

$ npx shadcn@latest add button

Preview

Variants

BubbleButton

A glowing, animated button variant with cursor-following glow effect and bubble highlights. Perfect for CTAs that need to stand out.

Sizes

Usage (React/TSX)

import { Button } from "@/components/ui/button"

export default function Example() {
  return (
    <div className="flex gap-3">
      <Button variant="primary">Get Started</Button>
      <Button variant="ghost">Learn More</Button>
    </div>
  )
}

Usage (HTML/CSS)

<button class="ds-btn-primary">GET STARTED</button>

<style>
  .ds-btn-primary {
    background: #A100FF;
    color: #ffffff;
    padding: 12px 32px;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ds-btn-primary:hover {
    background: #7c3aed;
    transform: translateY(-1px);
  }
</style>

Props

PropTypeDefaultDescription
variant"primary" | "ghost" | "destructive" | "outline" | "link""primary"The visual style of the button.
size"sm" | "md" | "lg" | "icon""md"The size of the button.
disabledbooleanfalseDisables the button.
classNamestring—Additional CSS classes to apply.
childrenReactNode—Content inside the button.

Design Notes

  • Sharp corners (4px radius). No rounded-full, no pill shapes.
  • Hover shifts to #7c3aed with subtle translateY(-1px) lift.
  • Focus ring in Electric Violet with 2px offset.
  • Uppercase text with bold weight (700).