feat(styles,react): use button and button card as links

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to the Ippon UI packages are documented in this file, so con
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), with one entry per release listing the affected package versions.
 
+## 2026-07-07 — @ippon-ui/styles 0.0.8 · @ippon-ui/react 0.0.7
+
+### Added
+
+- `button` atom and `button-card` organism can be used as links: an `<a href>` carrying the same classes renders without underline, and the Pattern Library documentation shows link examples.
+- `IpponLinkButton` and `IpponLinkButtonCard` React components: link (`<a href>`) counterparts of `IpponButton` and `IpponButtonCard`, sharing their look but exposing only link-relevant props (no `disabled`, loading or popover behavior).
+
 ## 2026-07-03 — @ippon-ui/styles 0.0.7 · @ippon-ui/react 0.0.6
 
 ### Added

react/README.md

@@ -37,6 +37,14 @@ export const SaveButton = () => (
 );
 ```
 
+To navigate to another page instead of triggering a callback, use the link counterparts `IpponLinkButton` and `IpponLinkButtonCard`, which render an `<a href>` with the same look:
+
+```tsx
+import { IpponLinkButton } from '@ippon-ui/react';
+
+export const SettingsLink = () => <IpponLinkButton href="/settings">Settings</IpponLinkButton>;
+```
+
 ## Documentation
 
 Every component is documented in [Storybook](https://storybook.js.org). Stories live in

react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ippon-ui/react",
   "description": "Ippon UI React Component Library",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -39,7 +39,7 @@
   },
   "peerDependencies": {
     "@ippon-ui/icons": "~0.0.2",
-    "@ippon-ui/styles": "~0.0.7",
+    "@ippon-ui/styles": "~0.0.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

react/src/Button.tsx

@@ -0,0 +1,35 @@
+import type { IconClassic, IconLogo, IconVariant } from '@ippon-ui/icons';
+import type { IpponIonProps } from './IpponIon.tsx';
+import { IpponIon } from './IpponIon.tsx';
+import { clsx } from 'clsx';
+
+export type IpponButtonIcon = {
+  name: IconClassic | IconLogo;
+  variant?: IconVariant;
+};
+
+export type IpponButtonColor = 'success' | 'error' | 'information' | 'warning' | 'neutral';
+
+export type IpponButtonVariant = 'secondary' | 'outline' | 'text';
+
+export type IpponButtonSize = 'small' | 'large';
+
+const ButtonIcon = ({ icon, loading }: { icon: IpponButtonIcon; loading?: boolean }) => (
+  <IpponIon
+    {...(icon as IpponIonProps)}
+    className={clsx('ippon-button--icon', { '-loading': loading })}
+  />
+);
+
+export const OptionalButtonIcon = ({
+  icon,
+  loading,
+}: {
+  icon?: IpponButtonIcon;
+  loading?: boolean;
+}) => {
+  if (icon === undefined) {
+    return null;
+  }
+  return <ButtonIcon icon={icon} loading={loading} />;
+};

react/src/IpponButton.tsx

@@ -1,22 +1,15 @@
 import type { DataSelectableWithChildren } from './DataSelectable.ts';
-import type { IconClassic, IconLogo, IconVariant } from '@ippon-ui/icons';
-import type { IpponIonProps } from './IpponIon.tsx';
-import { IpponIon } from './IpponIon.tsx';
+import type {
+  IpponButtonColor,
+  IpponButtonIcon,
+  IpponButtonSize,
+  IpponButtonVariant,
+} from './Button.tsx';
+import { OptionalButtonIcon } from './Button.tsx';
 import { optionalToAlternativeClass } from './CAP.ts';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-type IpponButtonIcon = {
-  name: IconClassic | IconLogo;
-  variant?: IconVariant;
-};
-
-type IpponButtonColor = 'success' | 'error' | 'information' | 'warning' | 'neutral';
-
-type IpponButtonVariant = 'secondary' | 'outline' | 'text';
-
-type IpponButtonSize = 'small' | 'large';
-
 type IpponButtonVanillaProps = {
   color?: IpponButtonColor;
   variant?: IpponButtonVariant;
@@ -34,20 +27,6 @@ export type IpponButtonProps = DataSelectableWithChildren<IpponButtonVanillaProp
 const isPromise = (value: unknown): value is Promise<void> =>
   value !== null && value !== undefined && typeof (value as Promise<void>).then === 'function';
 
-const ButtonIcon = ({ icon, loading }: { icon: IpponButtonIcon; loading?: boolean }) => (
-  <IpponIon
-    {...(icon as IpponIonProps)}
-    className={clsx('ippon-button--icon', { '-loading': loading })}
-  />
-);
-
-const OptionalButtonIcon = ({ icon, loading }: { icon?: IpponButtonIcon; loading?: boolean }) => {
-  if (icon === undefined) {
-    return null;
-  }
-  return <ButtonIcon icon={icon} loading={loading} />;
-};
-
 const LOADING_ICON: IpponButtonIcon = { name: 'sync' };
 
 export const IpponButton = (props: IpponButtonProps) => {

react/src/IpponLinkButton.tsx

@@ -0,0 +1,44 @@
+import type { DataSelectableWithChildren } from './DataSelectable.ts';
+import type {
+  IpponButtonColor,
+  IpponButtonIcon,
+  IpponButtonSize,
+  IpponButtonVariant,
+} from './Button.tsx';
+import { OptionalButtonIcon } from './Button.tsx';
+import { optionalToAlternativeClass } from './CAP.ts';
+import { clsx } from 'clsx';
+
+export type IpponLinkButtonProps = DataSelectableWithChildren<{
+  href: string;
+  color?: IpponButtonColor;
+  variant?: IpponButtonVariant;
+  size?: IpponButtonSize;
+  iconLeft?: IpponButtonIcon;
+  iconRight?: IpponButtonIcon;
+}>;
+
+export const IpponLinkButton = (props: IpponLinkButtonProps) => {
+  const hasIcon = [props.iconLeft, props.iconRight].some((icon) => icon !== undefined);
+
+  return (
+    <a
+      className={clsx(
+        'ippon-button',
+        optionalToAlternativeClass(props.color),
+        optionalToAlternativeClass(props.variant),
+        optionalToAlternativeClass(props.size),
+      )}
+      href={props.href}
+      data-selector={props.dataSelector}
+    >
+      <OptionalButtonIcon icon={props.iconLeft} />
+      {hasIcon && props.children ? (
+        <span className="ippon-button--text">{props.children}</span>
+      ) : (
+        props.children
+      )}
+      <OptionalButtonIcon icon={props.iconRight} />
+    </a>
+  );
+};

react/src/IpponLinkButtonCard.tsx

@@ -0,0 +1,36 @@
+import type { DataSelectableWithChildren } from './DataSelectable.ts';
+import {
+  optionalToAlternativeClass,
+  optionalToPrefixedAlternativeClass,
+  toAlternativeClass,
+} from './CAP.ts';
+import { clsx } from 'clsx';
+import type { IpponCardColor, IpponCardShadowLevel, IpponCardSize } from './Card.ts';
+
+export type IpponLinkButtonCardProps = DataSelectableWithChildren<{
+  href: string;
+  shadow?: IpponCardShadowLevel;
+  border?: boolean;
+  size?: IpponCardSize;
+  color?: IpponCardColor;
+  fullWidth?: boolean;
+}>;
+
+export const IpponLinkButtonCard = (props: IpponLinkButtonCardProps) => (
+  <a
+    className={clsx(
+      'ippon-button-card',
+      optionalToPrefixedAlternativeClass('shadow')(props.shadow),
+      {
+        [toAlternativeClass('border')]: props.border,
+        [toAlternativeClass('full-width')]: props.fullWidth,
+      },
+      optionalToAlternativeClass(props.size),
+      optionalToAlternativeClass(props.color),
+    )}
+    href={props.href}
+    data-selector={props.dataSelector}
+  >
+    {props.children}
+  </a>
+);

react/src/index.ts

@@ -9,6 +9,8 @@ export { IpponHSpace, IpponHSpaceSlot } from './IpponHSpace.tsx';
 export { IpponIcon } from './IpponIcon.tsx';
 export { IpponImportFile } from './IpponImportFile.tsx';
 export { IpponIon } from './IpponIon.tsx';
+export { IpponLinkButton } from './IpponLinkButton.tsx';
+export { IpponLinkButtonCard } from './IpponLinkButtonCard.tsx';
 export { IpponMeter } from './IpponMeter.tsx';
 export { IpponProgress } from './IpponProgress.tsx';
 export { IpponSeparator } from './IpponSeparator.tsx';

react/stories/IpponLinkButton.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IpponLinkButton } from '../src/IpponLinkButton.tsx';
+
+const meta = {
+  title: 'Atom/LinkButton',
+  component: IpponLinkButton,
+  args: {
+    children: 'Link button',
+    href: '#',
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['success', 'error', 'information', 'warning', 'neutral'],
+    },
+    variant: {
+      control: 'select',
+      options: ['secondary', 'outline', 'text'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'large'],
+    },
+  },
+} satisfies Meta<typeof IpponLinkButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <>
+      <IpponLinkButton {...args} color="information">
+        Primary
+      </IpponLinkButton>{' '}
+      <IpponLinkButton {...args} color="information" variant="secondary">
+        Secondary
+      </IpponLinkButton>{' '}
+      <IpponLinkButton {...args} color="information" variant="outline">
+        Outline
+      </IpponLinkButton>{' '}
+      <IpponLinkButton {...args} color="information" variant="text">
+        Text
+      </IpponLinkButton>
+    </>
+  ),
+};
+
+export const WithIcons: Story = {
+  args: {
+    color: 'information',
+    iconLeft: { name: 'open' },
+    iconRight: { name: 'chevron-forward' },
+  },
+};

react/stories/IpponLinkButtonCard.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IpponLinkButtonCard } from '../src/IpponLinkButtonCard.tsx';
+import { IpponText } from '../src/IpponText.tsx';
+
+const meta = {
+  title: 'Organism/LinkButtonCard',
+  component: IpponLinkButtonCard,
+  args: {
+    children: <IpponText variant="body">Card that navigates to a page</IpponText>,
+    href: '#',
+  },
+  argTypes: {
+    children: { control: false },
+    shadow: {
+      control: 'select',
+      options: [undefined, 'l1', 'l2', 'l3', 'l4', 'l5', 'l6'],
+    },
+    size: {
+      control: 'select',
+      options: [undefined, 'small', 'large'],
+    },
+    color: {
+      control: 'select',
+      options: [undefined, 'success', 'error', 'information', 'warning'],
+    },
+  },
+} satisfies Meta<typeof IpponLinkButtonCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { border: true },
+};
+
+export const WithShadow: Story = {
+  args: { shadow: 'l2' },
+};
+
+export const FullWidth: Story = {
+  args: { border: true, fullWidth: true },
+};