Inputs@knitui/components

ActionIcon

ActionIcon is a square, icon-only button — the closest sibling to Button. Same theme-driven palette ramp and pseudo states. variant chooses how the ramp applies, size sets the (square) metrics, radius the rounding. Accent comes from the theme prop, never a color prop. A bare @knitui/icons icon dropped inside auto-sizes and auto-colors to the control. loading swaps the icon for a Loader and blocks interaction. Always pass an aria-label — the icon carries no text.

WebiOSAndroid2 style slots2 own props17 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

variantVisual variant — how the theme color ramp is applied.

sizeControls the square width/height and radius.

radiusTheme radius token (e.g. `$sm`) or any CSS value.

disabled

false

loading

false

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

aria-labelAccessible name — required, since the icon has no visible text.

Playground

<ActionIcon
  aria-label="favourite"
  variant="filled"
  size="md"
  disabled={false}
  loading={false}
>
  <IconStar />
</ActionIcon>

Examples

Variants

Every visual variant side by side, captioned.

Loading example…

VariantsSource Storybook

Sizes

The seven token sizes, from xxs to xxl — the icon auto-scales to each.

Loading example…

SizesSource Storybook

Radius

radius rounds the square — from a soft xs to a full circle.

Loading example…

RadiusSource Storybook

Shadows

Elevation via the shared shadow ladder — inherited from Box, so every component accepts it; no shadow unless set.

Loading example…

ShadowsSource Storybook

Loading

Loading state — the icon is replaced by a spinner and interaction is blocked.

Loading example…

LoadingSource Storybook

Disabled

Disabled state — reduced opacity and pointer events off.

Loading example…

DisabledSource Storybook

Themed

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

Loading example…

ThemedSource Storybook

A realistic toolbar — distinct icons, a subtle variant, and a flush group.

Loading example…

ToolbarSource Storybook

Group

ActionIcon.Group attaches icons flush; orientation flips the axis.

Loading example…

GroupSource Storybook

Group With Section

ActionIcon.GroupSection is a non-interactive segment inside a group.

Loading example…

Group With SectionSource Storybook

Matrix

Full variant × size matrix for visual regression.

Loading example…

MatrixSource Storybook

Styles

Per-slot styles targets individual parts. The loader slot recolors the spinner; the icon slot recolors string-glyph children (node icons instead inherit color from the control via the icon context).

Loading example…

StylesSource Storybook

Gradient

variant="gradient" fills the square with a linear gradient. With no gradient prop it falls back to the theme ramp; otherwise pass a two-color shorthand, $colorN tokens, or a multi-step stops array. The icon auto-colors white on the gradient.

Loading example…

GradientSource Storybook

Gradient Presets

A set of curated gradient presets — handy starting points.

Loading example…

Gradient PresetsSource Storybook

Gradient Themed

variant="gradient" with no gradient prop derives the gradient from each theme.

Loading example…

Gradient ThemedSource Storybook

Gradient Sizes

One gradient (Sunset) across the full size scale.

Loading example…

Gradient SizesSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	`false`
`gradient` system	`GradientValue \| undefined`	—	Gradient fill for variant='gradient' — { from, to, deg } or { stops, deg }.
`loaderProps`	`Partial<LoaderProps> \| undefined`	—
`loading`	`boolean \| undefined`	`false`	If set, a `Loader` is shown instead of the icon and interaction is blocked.
`radius` system	`string \| number \| undefined`	—	Theme radius token (e.g. `$sm`) or any CSS value.
`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 and radius.
`styles` system	`SlotStyles<ActionIconStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink	—	Active theme accent — recolors the icon via the palette ramp.
`variant` system	`"light" \| "outline" \| "white" \| "transparent" \| "default" \| "filled" \| "subtle" \| "gradient" \| undefined` filled · light · outline · subtle · transparent · white · default · gradient	`filled`	Visual variant — how the theme color ramp is applied.

Style slots

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

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

Accessibility & DOM props (2)

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

Plus 498 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.