Close Btn

A compact dismiss button with a close icon, intended for use inside alerts, dialogs, toasts, and banners.

Basic Usage

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

export default function App() {
return <CloseBtn onClick={() => console.log("closed")} />
}

<button class="pm-close-btn pm-close-btn--md" aria-label="Close">
<svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>

Sizes

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

export default function App() {
return (
  <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
    <CloseBtn size="xs" />
    <CloseBtn size="sm" />
    <CloseBtn size="md" />
    <CloseBtn size="lg" />
  </div>
)
}

<div style="display: flex; gap: 8px; align-items: center;">
<button class="pm-close-btn pm-close-btn--xs" aria-label="Close">x</button>
<button class="pm-close-btn pm-close-btn--sm" aria-label="Close">x</button>
<button class="pm-close-btn pm-close-btn--md" aria-label="Close">x</button>
<button class="pm-close-btn pm-close-btn--lg" aria-label="Close">x</button>
</div>

Accessibility

Default aria-label is “Close”
Uses semantic <button> element
Icon is aria-hidden to avoid duplicate announcements

Best Practices

Provide a custom aria-label that describes what will be closed (e.g., “Close dialog”)
Match the close button size with the parent component’s size

React Props

Extends all native <button> HTML attributes.

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Size preset
`disabled`	`boolean`	`false`	Disabled state
`aria-label`	`string`	`"Close"`	Accessible label
`children`	`ReactNode`	—	Custom icon override

CSS Classes

Class	Purpose
`pm-close-btn`	Base styles
`pm-close-btn--xs`	Extra small size
`pm-close-btn--sm`	Small size
`pm-close-btn--md`	Medium size
`pm-close-btn--lg`	Large size
`pm-close-btn--disabled`	Disabled state