# antuikit / Button

> Button with a `squircle` shape, theme palettes on `color`, an `avatar` face, a centered `loading` spinner that keeps the button's size, and a `default` color that stays neutral on hover and press.

Docs: https://antuikit.com/docs/components/button

## Install

npx antuikit@latest init
npx antuikit@latest add button

## Import

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

## Demos

- [Variants](https://ui.antuikit.com/embed/button/variants.md): Set `variant` beside `color` to choose how much paint a button uses, from `solid` and `outlined` down to `text` and `link`.
- [Colors](https://ui.antuikit.com/embed/button/colors.md): Set `color` to `default`, `primary` or `danger`, or to a color name like `blue` or `emerald`, and each color works with every `variant`.
- [Size](https://ui.antuikit.com/embed/button/sizes.md): Set `size` to `small`, `medium` or `large` to match the button to the controls around it, with `medium` as the default.
- [Shape](https://ui.antuikit.com/embed/button/shapes.md): Set `shape` to `squircle` for a smooth superellipse corner, `round` for a pill, or `circle` for a round icon button.
- [Danger](https://ui.antuikit.com/embed/button/danger.md): Set `color="danger"` with any `variant` for destructive actions, from a solid Delete to a quiet Unsubscribe link.
- [Ghost](https://ui.antuikit.com/embed/button/ghost.md): Set `ghost` to drop the button's background so it reads over a photo or a colored surface, keeping its border and text color.
- [Block](https://ui.antuikit.com/embed/button/block.md): Set `block` to make a button fill the width of its parent, like the actions at the bottom of a form or a mobile sheet.
- [Disabled](https://ui.antuikit.com/embed/button/disabled.md): Set `disabled` on any variant or icon button, and on an `href` button, which then drops its link so it cannot be focused or followed.
- [Custom disabled background](https://ui.antuikit.com/embed/button/custom-disabled-bg.md): Set `defaultBgDisabled` and `dashedBgDisabled` in a `ThemeScope` to change the disabled fill of default and dashed buttons.
- [Icons](https://ui.antuikit.com/embed/button/icons.md): Pass an `Icon` to `icon` to put it before the label, or set `iconPlacement="end"` to move it after, like an arrow on Continue, with any `shape`.
- [Icon only](https://ui.antuikit.com/embed/button/icon-only.md): Pass only an `icon` and an `aria-label` for a square icon button in any variant, or set `shape` for a circle or a squircle.
- [Avatar](https://ui.antuikit.com/embed/button/avatar.md): Pass `avatar` an image URL to put a face in the icon slot, rounded to match its `shape`.
- [Avatar at the end](https://ui.antuikit.com/embed/button/avatar-end.md): Set `iconPlacement="end"` with `avatar` to put the face after the name, and the spacing around it moves along.
- [Avatar only](https://ui.antuikit.com/embed/button/avatar-only.md): Pass `avatar` and an `aria-label` with no label for a button that is only a face, in a square, squircle or circle shape.
- [Loading](https://ui.antuikit.com/embed/button/loading.md): Set `loadingPlacement="center"` to hide the label and center the spinner so the button keeps its size, or leave it off to swap the icon for a spinner.
- [Link buttons](https://ui.antuikit.com/embed/button/link-button.md): Pass `href` to render a button as a link that keeps its look, and use `variant="link"` for the link style on either element.
- [Scoped theme](https://ui.antuikit.com/embed/button/theme-scope.md): Wrap part of a page in `ThemeScope` to give it its own theme, like a violet primary for one button while the rest keeps yours.
- [Button group](https://ui.antuikit.com/embed/button/button-group.md): Wrap buttons in `Space.Compact` to join them into one group, like Move and Rename, with a lone Back button and a group that ends in a menu beside them.
- [Button group with a menu](https://ui.antuikit.com/embed/button/group-menu.md): End a group with a `Dropdown` on a chevron button to fold the extra actions into a menu, like the ways to publish or reply.
- [Button group with a count](https://ui.antuikit.com/embed/button/group-count.md): Join an action to a second button that shows its count, like Star and Watch, which toggle and update the number.
- [Vertical button group](https://ui.antuikit.com/embed/button/group-orientation.md): Set `orientation="vertical"` on `Space.Compact` to stack the buttons, like zoom in and out on a map.
- [Button group size](https://ui.antuikit.com/embed/button/group-size.md): Set `size` on `Space.Compact` to size every button in the group at once.
- [Button group toolbar](https://ui.antuikit.com/embed/button/formatting-toolbar.md): Mix a `Select` and buttons in one group for a text editor toolbar, with bold, italic and underline and a menu for the rest.
- [Danger zone](https://ui.antuikit.com/embed/button/danger-zone.md): A settings card of irreversible actions, each button louder than the last, with a confirmation before the delete.
- [Marketing CTA](https://ui.antuikit.com/embed/button/cta-row.md): A call to action with one solid button, one quiet text button and a line of reassurance underneath.
- [Copy to clipboard](https://ui.antuikit.com/embed/button/copy-feedback.md): An icon button that copies a command and swaps its copy icon for a check mark for a moment, without changing width.
- [Filters with a count](https://ui.antuikit.com/embed/button/filter-badge.md): A `Badge` around filter buttons that counts the active filters, which you toggle with the buttons below.
- [Design tool bar](https://ui.antuikit.com/embed/button/design-toolbar.md): A drawing app's tool bar where the picked tool turns solid, a chevron opens its variants with a check and a shortcut, and a `Segmented` switches the mode.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/button`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Button` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.