Icon button with Radix Slottable

Sometimes an asChild component adds its own content, like an icon. Slottable marks which child is the slotted element, so the extra content can go inside it.

All Radix UI examples Radix UI: usage and stats

Icon button with Radix Slottable: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Mark the slotted child. Slottable gets the user's element as child. With asChild, that element (a link or a span) becomes the rendered element and gets the Slot's style. [1]
Wrap its content with a render prop. The function child receives the slotted element's content and returns the icon followed by that content, so the icon ends up inside the link. [1]
Same component without asChild. Without asChild, Comp is a plain button and the render prop gets the button's text, so the Star button looks the same as the others. [2]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { Slot, Slottable } from "@radix-ui/react-slot";

const style = { display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: 8, border: "none", background: "#0ea5e9", color: "#04121c", font: "600 15px system-ui, sans-serif", textDecoration: "none", cursor: "pointer" };

// The icon is added inside the slotted element, next to its own text
function IconButton({ asChild = false, icon, children, style: extra, ...props }) {
  const Comp = asChild ? Slot : "button";
  return (
    <Comp style={{ ...style, ...extra }} {...props}>
      <Slottable child={children}>
        {(content) => (
          <>
            <span aria-hidden="true">{icon}</span>
            {content}
          </>
        )}
      </Slottable>
    </Comp>
  );
}

export default function App() {
  return (
    <div style={{ minHeight: "100vh", display: "grid", placeContent: "center", gap: 16, background: "#111", color: "#e5e7eb", font: "14px system-ui, sans-serif", textAlign: "center" }}>
      <div style={{ display: "flex", gap: 12 }}>
        <IconButton icon="★">Star</IconButton>
        <IconButton asChild icon="→">
          <a href="#docs">Read the docs</a>
        </IconButton>
        <IconButton asChild icon="✎" style={{ background: "#f472b6" }}>
          <span role="button" tabIndex={0}>Edit</span>
        </IconButton>
      </div>
      <div style={{ color: "#9ca3af" }}>A button, a link and a span, each with the icon inside it</div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

All three controls come from IconButton: a real button, a link and a span, each with its icon inside. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with @radix-ui/react-slot 1.5.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More Radix UI examples

The asChild pattern with Radix Slot How Radix Slot merges props Passing refs through Radix Slot

Sources

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with Radix UI? Ask AgentGid →