Button — ARC UI

Components

Button

input

hybrid

<arc-button>

Overview

Guidelines

When to use

Use primary for the single most important action on the page
Pair primary with secondary or ghost to create a clear visual hierarchy
Use the `prefix` slot for leading icons and `suffix` for trailing arrows or indicators
Use the lg size for hero sections and above-the-fold CTAs
Provide an href when the button navigates to another page or section
Keep button labels short and action-oriented (e.g. "Get Started", "View Docs")

When not to use

Place multiple primary buttons side by side — one primary per action group
Use ghost variant for the most important action; it is too subtle for primary CTAs
Omit href when the action is navigation — this hurts accessibility and SEO
Use long sentences as button labels; aim for two to three words maximum
Disable buttons without explaining why the action is unavailable

Features

Three variants (primary, secondary, ghost) for clear action hierarchy
Three size presets (sm, md, lg) scaled for context
Prefix and suffix slots for icons or inline elements alongside the label
Renders as <a> with href for accessible navigation
Neon glow hover effect on primary variant
Focus-visible ring for keyboard accessibility
Subtle scale-down on active press for tactile feedback
Disabled state that prevents interaction and dims the element
Uppercase Tektur type treatment for strong visual presence

Preview

Get Started

Bookmark

Learn More

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
  <arc-button variant="primary" size="lg" href="/docs/getting-started">Get Started</arc-button>
  <arc-button variant="secondary" href="/docs/components">View Docs</arc-button>
  <arc-button variant="ghost" href="/docs/tokens">Learn More</arc-button>
</div>

<!-- With prefix icon -->
<arc-button variant="secondary">
  <svg slot="prefix" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"/></svg>
  Bookmark
</arc-button>

import { Button } from '@arclux/arc-ui-react';

export function HeroActions() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
      <Button variant="primary" size="lg" href="/docs/getting-started">Get Started</Button>
      <Button variant="secondary" href="/docs/components">View Docs</Button>
      <Button variant="ghost" href="/docs/tokens">Learn More</Button>
    </div>
  );
}

{/* With prefix icon */}
<Button variant="secondary">
  <svg slot="prefix" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"/></svg>
  Bookmark
</Button>

<script setup>
import { Button } from '@arclux/arc-ui-vue';
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
    <Button variant="primary" size="lg" href="/docs/getting-started">Get Started</Button>
    <Button variant="secondary" href="/docs/components">View Docs</Button>
    <Button variant="ghost" href="/docs/tokens">Learn More</Button>
  </div>
</template>

<script>
  import { Button } from '@arclux/arc-ui-svelte';
</script>

<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
  <Button variant="primary" size="lg" href="/docs/getting-started">Get Started</Button>
  <Button variant="secondary" href="/docs/components">View Docs</Button>
  <Button variant="ghost" href="/docs/tokens">Learn More</Button>
</div>

import { Component } from '@angular/core';
import { Button } from '@arclux/arc-ui-angular';

@Component({
  imports: [Button],
  template: `
    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
      <Button variant="primary" size="lg" href="/docs/getting-started">Get Started</Button>
      <Button variant="secondary" href="/docs/components">View Docs</Button>
      <Button variant="ghost" href="/docs/tokens">Learn More</Button>
    </div>
  `,
})
export class HeroActionsComponent {}

import { Button } from '@arclux/arc-ui-solid';

export function HeroActions() {
  return (
    <div style={{ display: 'flex', 'align-items': 'center', gap: '12px', 'flex-wrap': 'wrap' }}>
      <Button variant="primary" size="lg" href="/docs/getting-started">Get Started</Button>
      <Button variant="secondary" href="/docs/components">View Docs</Button>
      <Button variant="ghost" href="/docs/tokens">Learn More</Button>
    </div>
  );
}

import { Button } from '@arclux/arc-ui-preact';

export function HeroActions() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
      <Button variant="primary" size="lg" href="/docs/getting-started">Get Started</Button>
      <Button variant="secondary" href="/docs/components">View Docs</Button>
      <Button variant="ghost" href="/docs/tokens">Learn More</Button>
    </div>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-button — requires button.css + base.css (or arc-ui.css) -->
<span class="arc-button">
  <a class="btn" href="#">Button</a>
</span>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-button — self-contained, no external CSS needed -->
<style>
  .arc-button:not([data-variant]) .btn:hover,
      .arc-button[data-variant="primary"] .btn:hover { box-shadow: 0 0 8px rgba(77,126,247,0.9), 0 0 20px rgba(77,126,247,0.5), 0 0 44px rgba(77,126,247,0.25), 0 0 80px rgba(77,126,247,0.1); }
  .arc-button:not([data-variant]) .btn:active,
      .arc-button[data-variant="primary"] .btn:active { transform: scale(0.97); box-shadow: 0 0 8px rgba(77, 126, 247,0.5); }
  .arc-button[data-variant="secondary"] .btn:hover { border-color: rgb(77, 126, 247);
        color: rgb(77, 126, 247);
        box-shadow: 0 0 20px rgba(77, 126, 247, 0.15); }
  .arc-button[data-variant="secondary"] .btn:active { transform: scale(0.97);
        background: rgba(77, 126, 247,0.05); }
  .arc-button[data-variant="ghost"] .btn:hover { color: rgb(232, 232, 236);
        background: rgba(255, 255, 255,0.03); }
  .arc-button[data-variant="ghost"] .btn:active { transform: scale(0.97);
        background: rgba(255, 255, 255,0.06); }
  .arc-button .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(3, 3, 7), 0 0 0 4px rgb(77, 126, 247), 0 0 16px rgba(77,126,247,0.3); }
</style>
<span class="arc-button" style="display: inline-flex">
  <a class="btn" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Tektur', system-ui, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; box-sizing: border-box" href="#">Button</a>
</span>

API

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`'primary'`	Controls the visual weight and emphasis. Primary is a filled button with a neon glow hover suited for the top-level CTA. Secondary uses a bordered outline for supporting actions. Ghost renders with no border or background, ideal for low-priority or tertiary actions.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Sets the button size. Large (lg) is intended for hero sections and high-impact areas. Medium (md) is the default for general UI. Small (sm) fits compact toolbars, table rows, and inline contexts.
`href`	`string`	—	When provided, the button renders as an <a> element instead of a <button>, making it a navigational link. This is the recommended approach for any action that takes the user to a new page or section.
`disabled`	`boolean`	`false`	When true, dims the button and prevents all pointer and keyboard interaction. Applies reduced opacity and removes hover/focus effects. Consider pairing with a tooltip that explains why the action is unavailable.
`loading`	`boolean`	`false`	Shows a spinner and disables the button. Use for async operations like form submission or API calls.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Sets the HTML button type attribute. Use `submit` inside forms to trigger native form submission, or `reset` to clear form fields. Only applies when no `href` is set (link buttons ignore this).