CloseButton
Button component for closing dialogs, modals, or dismissing content
Usage
import { CloseButton } from "@lenso/ui";"use client";// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.import { CloseButton } from "@lenso/ui";export function Default() { return <CloseButton />;}Local adaptation source above. Derived from HeroUI v3.2.6 source.
Examples
Interactive
"use client";// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.import { CloseButton } from "@lenso/ui";import { useState } from "react";import * as stylex from "@stylexjs/stylex";import { styles } from "./source.stylex";export function Interactive() { const [count, setCount] = useState(0); return ( <div {...stylex.props(styles.interactive)}> <CloseButton aria-label={`Close (clicked ${count} times)`} onClick={() => setCount(count + 1)} /> <span {...stylex.props(styles.count)}>Clicked: {count} times</span> </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
With Custom Icon
"use client";// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.import { CircleXmark, Xmark } from "@gravity-ui/icons";import { CloseButton } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { styles } from "./source.stylex";export function WithCustomIcon() { return ( <div {...stylex.props(styles.row)}> <div {...stylex.props(styles.column)}> <CloseButton> <CircleXmark /> </CloseButton> <span {...stylex.props(styles.caption)}>Custom Icon</span> </div> <div {...stylex.props(styles.column)}> <CloseButton> <Xmark /> </CloseButton> <span {...stylex.props(styles.caption)}>Alternative Icon</span> </div> </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
Customization
Tailwind CSS
"use client";// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.import { CloseButton } from "@lenso/ui";import { styles } from "./source.stylex";export function CustomStyles() { return <CloseButton aria-label="Close" xstyle={styles.custom} />;}Local adaptation source above. Derived from HeroUI v3.2.6 source.
Global CSS
To customize the CloseButton component classes, you can use the @layer components directive.
Learn more.
@layer components { .close-button { @apply bg-red-100 text-red-800 hover:bg-red-200; }
.close-button--custom { @apply rounded-full border-2 border-red-300; }}Styling Reference
HeroUI 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 [!toc]
.close-button- Base component styles
Variant Classes [!toc]
.close-button--default- Default variant
Interactive States
The component supports both CSS pseudo-classes and data attributes for flexibility:
- Hover:
:hoveror[data-hovered="true"] - Active/Pressed:
:activeor[data-pressed="true"] - Focus:
:focus-visibleor[data-focus-visible="true"] - Disabled:
:disabledor[aria-disabled="true"]
API Reference
CloseButton
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "default" | Visual variant of the button |
children | ReactNode | function | <CloseIcon /> | Content to display (defaults to close icon) |
onPress | () => void | - | Handler called when the button is pressed |
isDisabled | boolean | false | Whether the button is disabled |
React Aria Button Props
CloseButton extends all React Aria Button props. Common props include:
| Prop | Type | Description |
|---|---|---|
aria-label | string | Accessible label for screen readers |
aria-labelledby | string | ID of element that labels the button |
aria-describedby | string | ID of element that describes the button |
Render Props
When using the render prop pattern, these values are provided:
| Prop | Type | Description |
|---|---|---|
isHovered | boolean | Whether the button is hovered |
isPressed | boolean | Whether the button is pressed |
isFocused | boolean | Whether the button is focused |
isDisabled | boolean | Whether the button is disabled |