@ornikar/bumper 3.14.1 → 4.0.0

package/docs/migration/Button.md

@@ -143,7 +143,7 @@ If the source Button has only an `icon` prop and no `children`, use only `Button
 </Button>
 ```
 
-**Note**: Consider migrating icon-only buttons to `IconButton` from bumper instead, depending on design intent.
+**Note**: Consider migrating icon-only buttons to `ButtonIcon` from bumper instead, depending on design intent.
 
 ## Icon Migration
 
@@ -497,6 +497,6 @@ Apply these rules in order for each `<Button>` usage:
 - **Dynamic `stretch` variables**: When `stretch` receives a runtime variable (not an object literal), ask the user on how to proceed.
 - **`InternalLink as={Button}` wrappers**: The `as` polymorphic pattern may not be compatible with bumper's compound children model. Each InternalLink/InternalLinkButton wrapper needs manual verification.
 - **`Actions.Button`**: Shares ButtonProps but lives in a different component tree. Migrate separately as part of Actions component migration.
-- **Icon-only buttons**: Don't do anything. Migrate separatly as part of the IconButton component migration.
+- **Icon-only buttons**: Don't do anything. Migrate separatly as part of the ButtonIcon component migration.
 - **`style` prop usage**: Any custom styles passed via `style` prop need manual conversion to Tamagui style props.
 - **Components extending `ButtonProps`**: Proceed with the changes, only ask for user input if the linting is failing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "3.14.1",
+  "version": "4.0.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",

package/src/Bumper.mdx

@@ -27,10 +27,10 @@ spacing, color, radius, and typography.
 - [TypographyLink](?path=/docs/bumper-content-typographylink--docs) — Interactive link with underline and disabled states.
 - [Icon](?path=/docs/bumper-content-icon--docs) — Standalone icon wrapper. Color and size via tokens.
 
-## Actions
+## Buttons
 
-- [Button](?path=/docs/bumper-actions-button--docs) — Primary action component with text, icon, and badge slots.
-- [IconButton](?path=/docs/bumper-actions-iconbutton--docs) — Square icon-only button for toolbar actions and compact layouts.
+- [Button](?path=/docs/bumper-buttons-button--docs) — Primary action component with text, icon, and badge slots.
+- [ButtonIcon](?path=/docs/bumper-buttons-buttonicon--docs) — Square icon-only button for toolbar actions and compact layouts.
 
 ## Data Displays
 

package/src/index.ts

@@ -14,11 +14,11 @@ export { HStack, Stack, VStack } from './system/core/primitives/Stack';
 export type { ViewProps } from './system/core/primitives/View';
 export { View } from './system/core/primitives/View';
 
-// Actions
-export { Button } from './system/actions/Button/Button';
-export type { ButtonProps } from './system/actions/Button/types';
-export type { IconButtonProps } from './system/actions/IconButton/IconButton';
-export { IconButton } from './system/actions/IconButton/IconButton';
+// Buttons
+export { Button } from './system/buttons/Button/Button';
+export type { ButtonProps } from './system/buttons/Button/types';
+export type { ButtonIconProps } from './system/buttons/ButtonIcon/ButtonIcon';
+export { ButtonIcon } from './system/buttons/ButtonIcon/ButtonIcon';
 
 // Typography
 export { Typography } from './system/content/typography';

package/src/system/{actions → buttons}/Button/Button.features.stories.tsx

@@ -6,7 +6,7 @@ import { View } from '../../core/primitives/View';
 import { Button, InternalButtonFrame } from './Button';
 
 const meta: Meta<typeof Button> = {
-  title: 'Bumper/Actions/Button/Features',
+  title: 'Bumper/Buttons/Button/Features',
   component: Button,
 };
 

package/src/system/{actions → buttons}/Button/Button.mdx

@@ -83,4 +83,4 @@ All props support responsive overrides via Tamagui media query props (`$medium`,
 
 ## Related
 
-- [IconButton](?path=/docs/bumper-actions-iconbutton--docs)
+- [ButtonIcon](?path=/docs/bumper-actions-buttonicon--docs)

package/src/system/{actions → buttons}/Button/Button.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
-  title: 'Bumper/Actions/Button',
+  title: 'Bumper/Buttons/Button',
   component: Button,
   argTypes: {
     type: {

package/src/system/{actions → buttons}/Button/__snapshots__/Button.features.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Bumper/Actions/Button/Features Disabled 1`] = `
+exports[`Bumper/Buttons/Button/Features Disabled 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -293,7 +293,7 @@ exports[`Bumper/Actions/Button/Features Disabled 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features Loading 1`] = `
+exports[`Bumper/Buttons/Button/Features Loading 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -1296,7 +1296,7 @@ exports[`Bumper/Actions/Button/Features Loading 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features OnContrasted 1`] = `
+exports[`Bumper/Buttons/Button/Features OnContrasted 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -1655,7 +1655,7 @@ exports[`Bumper/Actions/Button/Features OnContrasted 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features Responsive 1`] = `
+exports[`Bumper/Buttons/Button/Features Responsive 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -1821,7 +1821,7 @@ exports[`Bumper/Actions/Button/Features Responsive 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features Sizes 1`] = `
+exports[`Bumper/Buttons/Button/Features Sizes 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -1988,7 +1988,7 @@ exports[`Bumper/Actions/Button/Features Sizes 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features StateFocusVisible 1`] = `
+exports[`Bumper/Buttons/Button/Features StateFocusVisible 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -2307,7 +2307,7 @@ exports[`Bumper/Actions/Button/Features StateFocusVisible 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features StateHover 1`] = `
+exports[`Bumper/Buttons/Button/Features StateHover 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -2626,7 +2626,7 @@ exports[`Bumper/Actions/Button/Features StateHover 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features StatePress 1`] = `
+exports[`Bumper/Buttons/Button/Features StatePress 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -2945,7 +2945,7 @@ exports[`Bumper/Actions/Button/Features StatePress 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features Stretch 1`] = `
+exports[`Bumper/Buttons/Button/Features Stretch 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -3289,7 +3289,7 @@ exports[`Bumper/Actions/Button/Features Stretch 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features Types 1`] = `
+exports[`Bumper/Buttons/Button/Features Types 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -3608,7 +3608,7 @@ exports[`Bumper/Actions/Button/Features Types 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features WithBadge 1`] = `
+exports[`Bumper/Buttons/Button/Features WithBadge 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -3963,7 +3963,7 @@ exports[`Bumper/Actions/Button/Features WithBadge 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/Button/Features WithIcon 1`] = `
+exports[`Bumper/Buttons/Button/Features WithIcon 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={

package/src/system/{actions → buttons}/Button/__snapshots__/Button.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Bumper/Actions/Button Default 1`] = `
+exports[`Bumper/Buttons/Button Default 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={

package/src/system/{actions → buttons}/Button/__snapshots_web__/Button.features.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Bumper/Actions/Button/Features Disabled 1`] = `
+exports[`Bumper/Buttons/Button/Features Disabled 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -99,7 +99,7 @@ exports[`Bumper/Actions/Button/Features Disabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features Loading 1`] = `
+exports[`Bumper/Buttons/Button/Features Loading 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -386,7 +386,7 @@ exports[`Bumper/Actions/Button/Features Loading 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features OnContrasted 1`] = `
+exports[`Bumper/Buttons/Button/Features OnContrasted 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -494,7 +494,7 @@ exports[`Bumper/Actions/Button/Features OnContrasted 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features Responsive 1`] = `
+exports[`Bumper/Buttons/Button/Features Responsive 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -554,7 +554,7 @@ exports[`Bumper/Actions/Button/Features Responsive 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features Sizes 1`] = `
+exports[`Bumper/Buttons/Button/Features Sizes 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -614,7 +614,7 @@ exports[`Bumper/Actions/Button/Features Sizes 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features StateFocusVisible 1`] = `
+exports[`Bumper/Buttons/Button/Features StateFocusVisible 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -709,7 +709,7 @@ exports[`Bumper/Actions/Button/Features StateFocusVisible 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features StateHover 1`] = `
+exports[`Bumper/Buttons/Button/Features StateHover 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -804,7 +804,7 @@ exports[`Bumper/Actions/Button/Features StateHover 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features StatePress 1`] = `
+exports[`Bumper/Buttons/Button/Features StatePress 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -899,7 +899,7 @@ exports[`Bumper/Actions/Button/Features StatePress 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features Stretch 1`] = `
+exports[`Bumper/Buttons/Button/Features Stretch 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -999,7 +999,7 @@ exports[`Bumper/Actions/Button/Features Stretch 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features Types 1`] = `
+exports[`Bumper/Buttons/Button/Features Types 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -1094,7 +1094,7 @@ exports[`Bumper/Actions/Button/Features Types 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features WithBadge 1`] = `
+exports[`Bumper/Buttons/Button/Features WithBadge 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -1203,7 +1203,7 @@ exports[`Bumper/Actions/Button/Features WithBadge 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/Button/Features WithIcon 1`] = `
+exports[`Bumper/Buttons/Button/Features WithIcon 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"

package/src/system/{actions → buttons}/Button/__snapshots_web__/Button.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Bumper/Actions/Button Default 1`] = `
+exports[`Bumper/Buttons/Button Default 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"

package/src/system/buttons/ButtonIcon/ButtonIcon.features.stories.tsx

@@ -0,0 +1,194 @@
+import { StarIcon } from '@ornikar/kitt-icons/ornicons';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography';
+import { HStack, VStack } from '../../core/primitives/Stack';
+import { View } from '../../core/primitives/View';
+import { ButtonIcon, InternalButtonIconFrame } from './ButtonIcon';
+
+const meta: Meta<typeof ButtonIcon> = {
+  title: 'Bumper/Buttons/ButtonIcon/Features',
+  component: ButtonIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Types: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
+      <ButtonIcon type="primary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon type="secondary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon type="tertiary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon type="danger">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+    </HStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <ButtonIcon size="large">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon size="small">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+    </HStack>
+  ),
+};
+
+export const WithBadge: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <ButtonIcon type="primary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+        <ButtonIcon.Badge count={3} />
+      </ButtonIcon>
+      <ButtonIcon type="primary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+        <ButtonIcon.Badge />
+      </ButtonIcon>
+      <ButtonIcon type="secondary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+        <ButtonIcon.Badge count={99} maxCount={99} />
+      </ButtonIcon>
+    </HStack>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
+      <ButtonIcon disabled type="primary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon disabled type="secondary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon disabled type="tertiary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon disabled type="danger">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+    </HStack>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
+      <ButtonIcon isLoading type="primary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon isLoading type="secondary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon isLoading type="tertiary">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+      <ButtonIcon isLoading type="danger">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </ButtonIcon>
+    </HStack>
+  ),
+};
+
+export const OnContrasted: Story = {
+  render: () => (
+    <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.m">
+      <VStack gap="$space.16">
+        <Typography.Text variant="label-l" color="$content.base.onContrasted.hi">
+          On contrasted background
+        </Typography.Text>
+        <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
+          <ButtonIcon isOnContrasted type="primary">
+            <ButtonIcon.Icon icon={<StarIcon />} />
+          </ButtonIcon>
+          <ButtonIcon isOnContrasted type="secondary">
+            <ButtonIcon.Icon icon={<StarIcon />} />
+          </ButtonIcon>
+          <ButtonIcon isOnContrasted type="tertiary">
+            <ButtonIcon.Icon icon={<StarIcon />} />
+          </ButtonIcon>
+          <ButtonIcon isOnContrasted type="danger">
+            <ButtonIcon.Icon icon={<StarIcon />} />
+          </ButtonIcon>
+        </HStack>
+      </VStack>
+    </View>
+  ),
+};
+
+export const StateHover: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
+      <InternalButtonIconFrame type="primary" forceStyle="hover">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+      <InternalButtonIconFrame type="secondary" forceStyle="hover">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+      <InternalButtonIconFrame type="tertiary" forceStyle="hover">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+      <InternalButtonIconFrame type="danger" forceStyle="hover">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+    </HStack>
+  ),
+};
+
+export const StatePress: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
+      <InternalButtonIconFrame type="primary" forceStyle="press">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+      <InternalButtonIconFrame type="secondary" forceStyle="press">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+      <InternalButtonIconFrame type="tertiary" forceStyle="press">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+      <InternalButtonIconFrame type="danger" forceStyle="press">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+    </HStack>
+  ),
+};
+
+export const StateFocusVisible: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
+      <InternalButtonIconFrame type="primary" forceStyle="focusVisible">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+      <InternalButtonIconFrame type="secondary" forceStyle="focusVisible">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+      <InternalButtonIconFrame type="tertiary" forceStyle="focusVisible">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+      <InternalButtonIconFrame type="danger" forceStyle="focusVisible">
+        <ButtonIcon.Icon icon={<StarIcon />} />
+      </InternalButtonIconFrame>
+    </HStack>
+  ),
+};
+
+export const Responsive: Story = {
+  render: () => (
+    <ButtonIcon size="small" $medium={{ size: 'large' }}>
+      <ButtonIcon.Icon icon={<StarIcon />} />
+    </ButtonIcon>
+  ),
+};

package/src/system/{actions/IconButton/IconButton.mdx → buttons/ButtonIcon/ButtonIcon.mdx}

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Primary, Controls, Canvas } from '@storybook/blocks';
-import * as IconButtonStories from './IconButton.stories';
-import * as IconButtonFeatures from './IconButton.features.stories';
+import * as ButtonIconStories from './ButtonIcon.stories';
+import * as ButtonIconFeatures from './ButtonIcon.features.stories';
 
-<Meta of={IconButtonStories} />
+<Meta of={ButtonIconStories} />
 <Title />
 <Subtitle />
 
@@ -11,63 +11,63 @@ import * as IconButtonFeatures from './IconButton.features.stories';
 
 ## Overview
 
-`IconButton` is a square button that contains only an icon — no text label. It extends `Button` internally but removes the `stretch` prop and adjusts padding to produce a square hit target. Use it for toolbar actions, close buttons, or anywhere a label would add unnecessary noise. Compose with `IconButton.Icon` and optionally `IconButton.Badge`.
+`ButtonIcon` is a square button that contains only an icon — no text label. It extends `Button` internally but removes the `stretch` prop and adjusts padding to produce a square hit target. Use it for toolbar actions, close buttons, or anywhere a label would add unnecessary noise. Compose with `ButtonIcon.Icon` and optionally `ButtonIcon.Badge`.
 
 ## Types
 
 Use `type` to set the visual intent: `primary`, `secondary` (default), `tertiary`, or `danger`.
 
-<Canvas of={IconButtonFeatures.Types} />
+<Canvas of={ButtonIconFeatures.Types} />
 
 ## Sizes
 
-`IconButton` comes in `large` (48px, default) and `small` (36px). Both produce a square button with equal horizontal and vertical padding.
+`ButtonIcon` comes in `large` (48px, default) and `small` (36px). Both produce a square button with equal horizontal and vertical padding.
 
-<Canvas of={IconButtonFeatures.Sizes} />
+<Canvas of={ButtonIconFeatures.Sizes} />
 
 ## With badge
 
-Append `IconButton.Badge` to overlay a count or dot indicator on the button. Pass `count` for a number, or omit it for a simple dot.
+Append `ButtonIcon.Badge` to overlay a count or dot indicator on the button. Pass `count` for a number, or omit it for a simple dot.
 
-<Canvas of={IconButtonFeatures.WithBadge} />
+<Canvas of={ButtonIconFeatures.WithBadge} />
 
 ## Disabled
 
 Set `disabled` to prevent interaction. Pointer events and focus are removed, and `aria-disabled` is set.
 
-<Canvas of={IconButtonFeatures.Disabled} />
+<Canvas of={ButtonIconFeatures.Disabled} />
 
 ## Loading
 
 Set `isLoading` to replace the icon with a `Loader` spinner. The button preserves its dimensions to prevent layout shifts.
 
-<Canvas of={IconButtonFeatures.Loading} />
+<Canvas of={ButtonIconFeatures.Loading} />
 
 ## On contrasted backgrounds
 
 Set `isOnContrasted` when the button sits on a dark or accent background to switch to `onContrasted` token variants.
 
-<Canvas of={IconButtonFeatures.OnContrasted} />
+<Canvas of={ButtonIconFeatures.OnContrasted} />
 
 ## Interaction states
 
 ### Hover
 
-<Canvas of={IconButtonFeatures.StateHover} />
+<Canvas of={ButtonIconFeatures.StateHover} />
 
 ### Press
 
-<Canvas of={IconButtonFeatures.StatePress} />
+<Canvas of={ButtonIconFeatures.StatePress} />
 
 ### Focus visible
 
-<Canvas of={IconButtonFeatures.StateFocusVisible} />
+<Canvas of={ButtonIconFeatures.StateFocusVisible} />
 
 ## Responsive
 
 All props support responsive overrides via Tamagui media query props (`$medium`, `$large`, etc.).
 
-<Canvas of={IconButtonFeatures.Responsive} />
+<Canvas of={ButtonIconFeatures.Responsive} />
 
 ## Related
 

package/src/system/{actions/IconButton/IconButton.stories.tsx → buttons/ButtonIcon/ButtonIcon.stories.tsx}

@@ -1,11 +1,11 @@
 import { StarIcon } from '@ornikar/kitt-icons/ornicons';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconButton } from './IconButton';
+import { ButtonIcon } from './ButtonIcon';
 
-const meta: Meta<typeof IconButton> = {
-  title: 'Bumper/Actions/IconButton',
-  component: IconButton,
+const meta: Meta<typeof ButtonIcon> = {
+  title: 'Bumper/Buttons/ButtonIcon',
+  component: ButtonIcon,
   argTypes: {
     type: {
       control: 'select',
@@ -47,8 +47,8 @@ export const Default: Story = {
     isLoading: false,
   },
   render: (args) => (
-    <IconButton {...args}>
-      <IconButton.Icon icon={<StarIcon />} />
-    </IconButton>
+    <ButtonIcon {...args}>
+      <ButtonIcon.Icon icon={<StarIcon />} />
+    </ButtonIcon>
   ),
 };