Button

ButtonCopy is a copy button — a Button preset for copy-to-clipboard. It composes a plain <Button> with a slotted <a-copy> element that writes to the clipboard when the button is activated. A button with a copy glyph changes the glyph to a check and retones to success for ~2s (✕ / critical on failure). Set copy for a literal string, or drop the label for an icon-only copy button.

<ButtonCopy copy="npm i @antadesign/anta" label="Copy install command" />
<ButtonCopy copy="https://anta.design" priority="tertiary" /> // icon-only

<ButtonCopy
  copy="npm i @antadesign/anta"
  label="Copy install command"
  iconPlacement="none"
  copiedLabel="Copied to clipboard"
/>

Icon placement

iconPlacement sets where the copy glyph sits: leading (the default) or trailing. Pass none to omit the glyph. A successful copy then shows the confirmation label without changing the button. Set copiedLabel to change the label text.

<ButtonCopy copy={value} label="Leading" />                              // default
<ButtonCopy copy={value} label="Trailing" iconPlacement="trailing" />
<ButtonCopy copy={value} label="No icon" iconPlacement="none" />

Copy a DOM node

Pass copyNode to copy a rendered region as rich text (text/html) plus plain text, instead of a string. Bare copyNode copies the nearest ancestor marked data-copy-source; a string is a CSS selector for an ancestor region. The copy button itself is stripped from what’s copied.

<div data-copy-source>
  <Text>The quick brown fox jumps over the lazy dog.</Text>
  <ButtonCopy copyNode label="Copy card" size="small" priority="tertiary" />
</div>

Copy the page URL

copyUrl copies the current page URL (location.href) — no copy value needed. copyWithUrl prefixes a copy string with // URL: <href>, so a copied snippet carries a link back to where it came from.

<ButtonCopy copyUrl label="Copy link" />
<ButtonCopy copy={snippet} copyWithUrl label="Copy snippet" />  {/* snippet + source URL */}

Copy dynamic text

copy is a controlled string. Start it at '', then set the new text in onCopyRequest. The next render updates copy, and activation writes that value. onCopyRequest does not return text. It does not add a polling loop.

const [report, setReport] = useState('')

<ButtonCopy
  copy={report}
  label="Copy report"
  onCopyRequest={() => setReport(generateReport())}
/>

Why copy is controlled

In a usual React or Preact app, an onClick handler can calculate a string and call the Clipboard API itself. ButtonCopy also supports applications rendered from a worker. The DOM copy control and Clipboard API are on the browser UI thread, but the application’s JSX code can be elsewhere. A function cannot cross that boundary as a callable reference.

The request tells the application to calculate the text. Its state update makes the renderer send the string as the copy attribute. The control then writes that attribute during activation, when the browser permits clipboard access. A lazyCopy: () => string prop could only hide this same state update inside the wrapper. A generic return value would also need a defined clipboard format and serialization; Anta supports text (copy), a DOM region (copyNode), and the current URL (copyUrl).

Props

Anta’s CSS targets a-button, a[role="button"][data-anta] — an anchor (<a>) with role="button", the data-anta opt-in marker, and the right attributes gets the styling. That means anta doesn’t need an as / asChild / component prop or per-framework integrations. Compose your own thin wrapper around your library’s Link component — which renders an <a>, so adding role="button" and data-anta matches the selector.

The data-anta marker is required because role="button" is a generic ARIA role that other widgets emit too — gating on the marker keeps anta from restyling anchors it doesn’t own (a third-party menu, an embedded editor’s toolbar, etc.).

// LinkButton.tsx — anta-styled link for client-side routing
import { Link, type LinkProps } from 'react-router-dom'
import type { IconShape } from '@antadesign/anta'

type LinkButtonProps = LinkProps & {
  tone?: 'neutral' | 'brand' | 'critical' | 'info' | 'success' | 'warning'
  priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary'
  size?: 'small' | 'medium' | 'large'
  icon?: IconShape
  iconTrailing?: IconShape
  label?: string
}

export const LinkButton = ({
  tone, priority, size, icon, iconTrailing, label, children, ...rest
}: LinkButtonProps) => (
  <Link role="button" data-anta tone={tone} priority={priority} size={size} {...rest}>
    {icon && <a-icon shape={icon} aria-hidden="true" />}
    {label != null && <a-button-label>{label}</a-button-label>}
    {children}
    {iconTrailing && <a-icon shape={iconTrailing} aria-hidden="true" />}
  </Link>
)

Usage:

<LinkButton to="/dashboard" tone="brand" label="Dashboard" />
<LinkButton to="/docs" priority="tertiary" iconTrailing="external-link" label="Docs" />

This approach would work for Next.js <Link>, TanStack Router, or any other routing library.

Beyond a plain click, a Button can drive a native form or emit your own event:

<form id="signup">
  <Button tone="brand" type="submit" label="Sign up" />
  <Button tone="brand" priority="tertiary" type="reset" label="Clear" />
</form>
{/* Associate with a form by id when the button is outside */}
<Button tone="neutral" type="submit" form="signup" label="Submit from outside" />

<Button tone="brand" label="Save" data-custom-event="save-clicked" />

Use the web component directly when you are not using React or Preact and a native control does not fit.

Set role="button" and tabindex="0" when authoring <a-button> directly.

<a-button role="button" tabindex="0" priority="primary">
  <a-icon shape="plus" aria-hidden="true"></a-icon>
  <a-button-label>Create project</a-button-label>
</a-button>

Native HTML button

The styling attaches to three element shapes, so you can adopt the button look on markup you already own instead of routing through <Button>. data-anta is the opt-in marker — it stops Anta restyling a role="button" element it does not own (a third-party menu, an embedded editor’s toolbar):

tone / priority / size are plain attributes on the element (the <Button> wrapper sets them for you). A native <button> also carries its own default type="submit", so inside a <form> it submits without extra wiring:

<!-- A real <button>: submits forms and toggles `disabled` natively. -->
<button data-anta tone="brand" priority="primary">Save changes</button>
<button data-anta priority="secondary">Cancel</button>
<button data-anta tone="critical" priority="tertiary">Delete</button>

Reach for the props first: tone sets the color (any CSS color for a custom tone — it derives the whole tone × priority × state curve in oklch), priority the emphasis, size the dimensions. The focus ring is the global --focus-ring.

<Button tone="#e0457b" priority="primary" label="Custom" />

For anything beyond the props, <a-button> is light-DOM — restyle it with plain CSS (an un-layered rule beats @layer anta without !important). Set background-color / color per state, plus full type control (size, line-height, letter-spacing, font-feature-settings), padding, radius, even a frosted backdrop-filter — no need to touch a single token. light-dark() works too (Anta sets color-scheme from its theme toggle), so colors adapt to dark mode with no .dark selector. The classes below are just for the demos:

/* First — inverted pill: a theme-flipping gradient (near-black in light,
   near-white in dark) via light-dark() in the gradient stops. Anta sets
   color-scheme from its .dark toggle, so it adapts with no .dark selector. */
a-button.checkout {
  background: linear-gradient(140deg, light-dark(#26262b, #fff), light-dark(#000, #dcdce0));
  color: light-dark(#fff, #0b0b0c);
  font-size: 20px;
  line-height: 1.2em;
  padding: 12px 26px;
  border-radius: 999px;
}
a-button.checkout:hover  { background: linear-gradient(140deg, light-dark(#3a3a42, #fff), light-dark(#161618, #cacace)); }
a-button.checkout:active { background: linear-gradient(140deg, light-dark(#000, #ececf0), light-dark(#1a1a1c, #fff)); }
a-button.checkout a-button-label {            /* customized label */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* Second — liquid glass: frost + translucent tint + a diagonal specular sheen,
   a top/bottom bevel, and a soft lift. Sits on a colorful backdrop so it reads. */
a-button.glass {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.06) 45%, transparent 65%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  backdrop-filter: blur(8px) saturate(1.8) brightness(1.06);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.65),    /* top bevel */
    inset 0 -2px 3px rgba(255,255,255,0.18),
    0 8px 24px rgba(0,0,0,0.22);               /* lift */
  font-size: 20px; line-height: 1.2em; padding: 12px 26px;
}
a-button.glass:hover  { background-color: rgba(255, 255, 255, 0.22); }
a-button.glass:active { background-color: rgba(255, 255, 255, 0.08); }
a-button.glass a-button-label {               /* beautified label — gradient text */
  font-weight: 600;
  background: linear-gradient(180deg, #fff, #cfe0ff);
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

<Button className="custom" tone="brand" loading label="Saving changes" />

<style>{`
  /* Keep loading's blocked interaction; replace only its stripe overlay. */
  a-button.custom[loading]::before {
    inset: -200%;
    border-radius: 100%;
    background: conic-gradient(
      from 0deg,
      color-mix(in oklch, currentColor 0%, transparent),
      color-mix(in oklch, currentColor 10%, transparent)
    );
    opacity: 1;
    filter: none;
    animation: button-loader-field-spin 1s linear infinite;
    animation-delay: -9999s;
  }

  @keyframes button-loader-field-spin {
    to { transform: rotate(1turn); }
  }
`}</style>

Don’t reach for the resolved --button-fg / --button-bg: they’re recomputed per state, so setting one only catches a single state — restyle per state as above, or use tone for a full custom-color curve.