Inputs@knitui/components

CloseButton

CloseButton mirrors Mantine's CloseButton, built on ActionIcon. It renders a centered ✕ glyph by default and inherits all ActionIcon props except loading and children (children are appended after the icon, useful for a VisuallyHidden label). Accent comes from the theme prop + palette ramp.

WebiOSAndroid1 style slots3 own props13 examples

Stories Source Tests Open in Storybook

import { CloseButton } from "@knitui/components";

Playground

Loading playground…

variantVisual variant — how the theme color ramp is applied.

sizeControls the square width/height, radius and icon size.

iconSizeOverride the `✕` glyph font size. Ignored when `icon` is set.

disabled

false

themeActive theme accent — recolors the button via the palette ramp.

Playground

<CloseButton
  variant="subtle"
  size="md"
  disabled={false}
/>

Examples

Variants

Every visual variant side by side at the default size.

Loading example…

VariantsSource Storybook

Sizes

The full seven-step size scale, from xxs to xxl.

Loading example…

SizesSource Storybook

Shadows

The inherited shadow elevation ladder, from xs to xl.

Loading example…

ShadowsSource Storybook

Disabled

Disabled state — reduced opacity and pointer events off.

Loading example…

DisabledSource Storybook

Custom Icon

Custom icon replaces the default ✕ glyph entirely.

Loading example…

Custom IconSource Storybook

Custom Aria Label

Custom aria-label overrides the default "Close" label for accessibility.

Loading example…

Custom Aria LabelSource Storybook

Themed

The palette ramp follows the active theme — same component, different accent.

Loading example…

ThemedSource Storybook

Gradient

Gradient fill — themed default (no gradient prop), a two-color shorthand, a token gradient, and a multi-step stops gradient.

Loading example…

GradientSource Storybook

Gradient Presets

Curated gradient presets for the gradient variant.

Loading example…

Gradient PresetsSource Storybook

Gradient Themed

Themed gradient (no gradient prop) — the $color5→$color9 ramp follows the active theme.

Loading example…

Gradient ThemedSource Storybook

Matrix

Full variant × size matrix for visual regression.

Loading example…

MatrixSource Storybook

Styles

Per-slot styles targets individual parts — here the icon glyph.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Extra content rendered after the icon (e.g. a `VisuallyHidden` label).
`disabled` system	`boolean \| undefined`	`false`
`gradient` system	`GradientValue \| undefined`	—	Gradient fill for variant='gradient' — { from, to, deg } or { stops, deg }.
`icon`	`ReactNode`	—	Node to replace the default close icon. When set, `iconSize` is ignored.
`iconSize`	`string \| number \| undefined`	—	Override the `✕` glyph font size. Ignored when `icon` is set.
`radius` system	`string \| number \| undefined`	—
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`string \| number \| undefined` xxs · xs · sm · md · lg · xl · xxl	`md`	Controls the square width/height, radius and icon size.
`styles` system	`SlotStyles<CloseButtonStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Active theme accent — recolors the button via the palette ramp.
`variant` system	`"light" \| "outline" \| "white" \| "transparent" \| "default" \| "filled" \| "subtle" \| "gradient" \| undefined` filled · light · outline · subtle · transparent · white · default · gradient	`subtle`	Visual variant — how the theme color ramp is applied.

Style slots

Every part of CloseButton can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`icon`	`styles={{ icon: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 497 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.