Skip to content
Paramanu v0.1.0-alpha.0

Icon Btn

A button that renders only an icon, requiring aria-label for accessibility. Supports square and circle shapes.

Basic Usage

import { IconBtn } from "@paramanu/buttons-react"


export default function App() {
return (
  <IconBtn aria-label="Search">
    <SearchIcon />
  </IconBtn>
)
}
<button class="pm-icon-btn pm-icon-btn--primary pm-icon-btn--md pm-icon-btn--square" aria-label="Search">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</button>

Variants

import { IconBtn } from "@paramanu/buttons-react"


export default function App() {
return (
  <div style={{ display: "flex", gap: "8px" }}>
    <IconBtn variant="primary" aria-label="Primary"><PlusIcon /></IconBtn>
    <IconBtn variant="secondary" aria-label="Secondary"><PlusIcon /></IconBtn>
    <IconBtn variant="danger" aria-label="Danger"><PlusIcon /></IconBtn>
    <IconBtn variant="ghost" aria-label="Ghost"><PlusIcon /></IconBtn>
    <IconBtn variant="outline" aria-label="Outline"><PlusIcon /></IconBtn>
  </div>
)
}
<div style="display: flex; gap: 8px;">
<button class="pm-icon-btn pm-icon-btn--primary pm-icon-btn--md pm-icon-btn--square" aria-label="Primary">+</button>
<button class="pm-icon-btn pm-icon-btn--secondary pm-icon-btn--md pm-icon-btn--square" aria-label="Secondary">+</button>
<button class="pm-icon-btn pm-icon-btn--danger pm-icon-btn--md pm-icon-btn--square" aria-label="Danger">+</button>
<button class="pm-icon-btn pm-icon-btn--ghost pm-icon-btn--md pm-icon-btn--square" aria-label="Ghost">+</button>
<button class="pm-icon-btn pm-icon-btn--outline pm-icon-btn--md pm-icon-btn--square" aria-label="Outline">+</button>
</div>

Shape

import { IconBtn } from "@paramanu/buttons-react"


export default function App() {
return (
  <div style={{ display: "flex", gap: "8px" }}>
    <IconBtn shape="square" aria-label="Square"><PlusIcon /></IconBtn>
    <IconBtn shape="circle" aria-label="Circle"><PlusIcon /></IconBtn>
  </div>
)
}
<div style="display: flex; gap: 8px;">
<button class="pm-icon-btn pm-icon-btn--primary pm-icon-btn--md pm-icon-btn--square" aria-label="Square">+</button>
<button class="pm-icon-btn pm-icon-btn--primary pm-icon-btn--md pm-icon-btn--circle" aria-label="Circle">+</button>
</div>