Close Button

Generic dismiss control for closing content like modals and alerts.

Examples

<CloseButton> renders a dismiss control for closing a component like a modal or an alert. Its default styling is minimal — an X icon with no border or background — so it composes cleanly into whatever surface it sits on.

import { CloseButton } from '@chassis-ui/react'

export const Example = () => {
  return <CloseButton />
}

Disabled state

Set disabled to lower the button's opacity and block interaction. pointer-events: none and user-select: none also apply, so hover and active states never trigger.

import { CloseButton } from '@chassis-ui/react'

export const Example = () => {
  return <CloseButton disabled />
}

Sizes

Set size to "sm" or "lg" to match <CloseButton> to surrounding component sizes.

import { CloseButton } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <CloseButton size="sm" />
      <CloseButton />
      <CloseButton size="lg" />
    </>
  )
}

Contextual colors

<CloseButton> inherits its icon color from the nearest context class by default.

import { CloseButton } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <div className="context primary p-xs d-inline-flex">
        <CloseButton />
        <CloseButton disabled />
      </div>
      <div className="context primary solid p-xs d-inline-flex">
        <CloseButton />
        <CloseButton disabled />
      </div>
      <div className="context warning p-xs d-inline-flex">
        <CloseButton />
        <CloseButton disabled />
      </div>
      <div className="context warning solid p-xs d-inline-flex">
        <CloseButton />
        <CloseButton disabled />
      </div>
    </>
  )
}

Set color and variant to apply a context style directly to <CloseButton>, independent of any ancestor context class.

import { CloseButton } from '@chassis-ui/react'

export const Example = () => {
  return (
    <div className="neutral-bg-evident d-inline-flex p-xs gap-sm">
      <CloseButton color="primary" />
      <CloseButton color="primary" variant="solid" />
      <CloseButton color="warning" />
      <CloseButton color="warning" variant="solid" />
    </div>
  )
}

Localizing the label

<CloseButton> renders with an accessible name of "Close" by default. Use the label property to localize it for non-English contexts.

import { CloseButton } from '@chassis-ui/react'

export const Example = () => {
  return <CloseButton label="Kapat" />
}

Custom icon

Place a custom icon inside <CloseButton> to replace the default X icon — the icon inherits the button's color and size.

import { CloseButton, Icon } from '@chassis-ui/react'

export const Example = () => {
  return (
    <CloseButton label="Kapat">
      <Icon name="xmark-circle-solid" />
    </CloseButton>
  )
}

API

CloseButton

Prop	Type	Default
`asChild?`	`boolean`	—
Render the single child element in place of this component's own element, with this component's classes, props and ref merged onto it: `<Button asChild><Link href="/login">Log in</Link></Button>`. The alternative to `component` for React Server Components — an element can be passed from the server to this package's client components, a component reference (`component={Link}`) can't.
`className?`	`string`	—
A string of all className you want applied to the base component.
`color?`	`ContextColor`	—
Sets the color of the component to one of Chassis context colors. Applies the `context` class alongside it, so the icon picks up that color without needing an ancestor `.context` wrapper.
`component?`	`ElementType`	—
Component used for the root node. Either a string to use a HTML element or a component. A custom HTML tag (e.g. `'span'`) gets button semantics — role, focus, Enter/Space activation — filled in automatically. A component is trusted to handle its own semantics, so pass one that's already interactive (e.g. `Button`).
`disabled?`	`boolean`	—
Toggle the disabled state for the component.
`href?`	`string`	—
The href attribute specifies the URL of the page the link goes to. Renders an `<a>` in place of the `<button>`, unless `component` or `asChild` chose the element.
`label?`	`string`	—
The accessible label announced by assistive technology. Override this to localize the button for non-English contexts.
`onClick?`	`MouseEventHandler<HTMLAnchorElement \| HTMLButtonElement>`	—
Fires on click. Typed for every element `component` can actually render (`button` or `a` natively, plus whatever a custom `component` renders), rather than narrowed to `HTMLButtonElement` alone.
`ref?`	`any`	—

`size?`	`"sm" \| "lg"`	—
Size the component sm or lg.
`type?`	`"button" \| "submit" \| "reset"`	—
Specifies the type of button. Always specify the type attribute for the `<button>` element. Different browsers may use different default types for the `<button>` element.
`variant?`	`ContextStyle`	—
Set the close button's context style variant. Applies the `context` class alongside it, same as `color`.