# Beste UI > Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade. Markdown rendition of https://ui.beste.co/component/button4. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`. Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json --- 1. / 2. [Components](/components) 3. / 4. [Button](/components/button) 5. / 6. Icon Button # Icon Button An accessible icon button with a required label, three sizes, and circle or square shape. PreviewCode ## Installation Adds the component and everything it depends on to your project. ![](https://oud.pics/sm/l/npm.svg)npm![](https://oud.pics/sm/l/bun.svg)bun![](https://oud.pics/sm/l/pnpm.svg)pnpm![](https://oud.pics/sm/l/yarn.svg)yarn Base UI `npx shadcn add https://ui.beste.co/component/r-base/button4` New here? Read the [installation guide](/docs/installation). ## Usage The import and the props worth knowing about, in one place. ``` import { Button4 } from "@/components/beste/component/button4"; import { Play } from "lucide-react"; import Link from "next/link"; // Icon-only: label is required and becomes the accessible name. console.log("play showreel")} /> // Compose the link with the render prop: your Link becomes the rendered // element and the button content stays as its children. } /> ``` ## Playground Turn the props on the right; the snippet under them is what you would write to get what you see. Usage ``` import { Button4 } from "@/components/beste/component/button4"; ``` Props Label Surface Sizemd Rounded fullmd Toneneutral ## Props Read from the component's own type, so this cannot drift from what it accepts. | Prop | Type | Default | Description | | | --------- | ------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | label\* | string | — | Accessible name, required, since the button shows only an icon | | | asChild | boolean | — | Compose the rendered element shadcn-style (radix asChild): your element (e.g. a router Link) becomes the root and the button content is injected as its children. Pass the element without children of its own. | | | children | React.ReactElement | — | The element to render when \`asChild\` is set (e.g. your framework's Link) | | | icon | LucideIcon | — | The icon (defaults to ArrowUpRight) | | | href | string | — | Fallback link: renders a plain \`\`. Prefer \`asChild\` with your framework's Link component for client-side navigation. | | | tone | "neutral" \| "dark" | "primary" | — | Surface tone: bordered background (default), solid dark, or primary | | size | "sm" \| "md" | "lg" | — | Button size | | rounded | "full" \| "md" | — | Circle (default) or rounded square | | | onClick | React.MouseEventHandler | — | Click handler (used when there is no href and no asChild) | | | className | string | — | Additional classes merged onto the button | | [PreviousAsync Loading Button](/component/button3)[NextSplit Button](/component/button5) On this page * [Preview](#preview) * [Installation](#installation) * [Usage](#usage) * [Playground](#playground) * [Props](#props) ## More Button components [View all Button](/components/button) [](/component/button15) Get in touch ### Expanding Reveal Button An expanding icon button that reveals its label on hover or focus for compact layouts. [](/component/button11) Press me ### Pressable Button A neobrutalist button with a hard offset shadow that lifts on hover and presses in on click. [](/component/button13) Start your projectStart your projectStart your project ### Letter Roll Button A pill button whose label rolls up letter by letter with a staggered hover animation. [](/component/button7) Watch showreel2:31 ### Play Button A video play button with a circular play seal, label, and duration for showreels and product demos. [](/component/button2) View all case studies ### Underline Arrow Button A minimal text button with an animated underline and arrow for lightweight calls to action. [](/component/button18) View manifest ### Corner Brackets Button A monospace button framed by corner brackets that spring outward on hover. ## Ship the interface, keep the code. New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight. [Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing) ### Library * [Blocks](/blocks) * [Pages](/pages) * [Pieces](/pieces) * [Components](/components) * [Search](/search) ### Learn * [Docs](/docs) * [AI & MCP](/docs/mcp) * [Blog](/blog) * [Free tools](/tools) * [What's new?](/changelog) * [Website Builder](https://beste.co) ### More * [Pricing](/pricing) * [Referrals](/referrals) * [License](/license) * [GitHub](https://github.com/beste-co/beste-ui) ### Shadcn Blocks * [Shadcn Hero Blocks](/blocks/hero) * [Shadcn Feature Blocks](/blocks/feature) * [Shadcn Pricing Blocks](/blocks/pricing) * [Shadcn CTA Blocks](/blocks/cta) * [Shadcn FAQ Blocks](/blocks/faq) * [Shadcn About Blocks](/blocks/about) * [Shadcn Stats Blocks](/blocks/stats) * [Shadcn Footer Blocks](/blocks/footer) * [Shadcn Navigation Blocks](/blocks/navigation) * [Shadcn Auth Blocks](/blocks/auth) * [Shadcn Ecommerce Blocks](/blocks/ecommerce) * [Shadcn Portfolio Blocks](/blocks/portfolio) * [Shadcn Showcase Blocks](/blocks/showcase) * [Shadcn Careers Blocks](/blocks/careers) * [Shadcn Onboarding Blocks](/blocks/onboarding) * [Shadcn Coming Soon Blocks](/blocks/coming-soon) * [Shadcn Post Blocks](/blocks/post) * [Shadcn Legal Blocks](/blocks/legal) * [Shadcn Workflow Blocks](/blocks/workflow) * [Shadcn News Blocks](/blocks/news) © 2026, [Beste](https://beste.co). All rights reserved.