ui / actions

Icon Button

A compact accessible icon action with a required name.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

INSTALL / SOURCE REGISTRY

Add Icon Button to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/icon-button.json

registry/default/ui/icon-button.tsx

import * as React from "react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  label: string
  variant?: "primary" | "secondary" | "ghost" | "danger"
}

export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
  ({ label, variant = "secondary", className, children, ...props }, ref) => (
    <button
      ref={ref}
      type="button"
      aria-label={label}
      title={label}
      className={cn("dos-icon-button", variant !== "primary" && `dos-button--${variant}`, className)}
      {...props}
    >
      {children}
    </button>
  ),
)
IconButton.displayName = "IconButton"

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy