ui modal close button / components

ui modal close button

UiModalCloseButton is the close action companion to UiModal. It stays on the Base UI dialog-close API, but renders through the shared ActionButton path so modal actions match the rest of the DS button system while still closing the surrounding dialog context.

field	value
group	global
import	`@arieare/ds`
source	`packages/ds/src/components/ui/modal.tsx` `packages/ds/src/components/button/ActionButton.tsx`

Open the modal to inspect the dialog-scoped close action.

component tokens

token	source	description
`--btn-h / --btn-px / --btn-py`	@arieare/ds/tokens.css	Controls button height and padding across text, text-icon, and icon-only variants.
`--btn-border-* / --btn-bg-* / --btn-ink-*`	@arieare/ds/tokens.css	Idle, hover, active, and disabled color tokens for the shared action contract.
`--btn-icon-size`	@arieare/ds/tokens.css	Sets icon sizing for icon-bearing button variants.

props

prop	type	default	description
`children`	ReactNode	—	Visible button label content.
`...dialog close props`	ComponentProps<typeof Dialog.Close>	—	Passes standard dialog-close props through inside a modal context.