CloseButton

Import

import { CloseButton } from "@blakeui/react";

Usage

import {CloseButton} from "@blakeui/react";

export function Default() {
  return <CloseButton />;
}

With Custom Icon

import {CloseButton} from "@blakeui/react";
import {CircleXmark, Xmark} from "@gravity-ui/icons";

export function WithCustomIcon() {
  return (

Interactive

"use client";

import {CloseButton} from "@blakeui/react";
import {useState} from "react";

Styling

Passing Tailwind CSS classes

import {CloseButton} from "@blakeui/react";

function CustomCloseButton() {
  return <CloseButton className="text-red-600 hover:bg-red-100">Close</CloseButton>;
}

Customizing the component classes

To customize the CloseButton component classes, you can use the @layer components directive.
Learn more.

A worked example is in Styling.

blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The CloseButton component uses these CSS classes (View source styles):

Base Classes

• .close-button - Base component styles

Variant Classes

• .close-button--default - Default variant

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

• Hover: :hover or [data-hovered="true"]
• Active/Pressed: :active or [data-pressed="true"]
• Focus: :focus-visible or [data-focus-visible="true"]
• Disabled: :disabled or [aria-disabled="true"]

API Reference

CloseButton Props

React Aria Button Props

CloseButton extends all React Aria Button props. Common props include:

RenderProps

When using the render prop pattern, these values are provided: