Shared/ActionButton

Button Group

Default

labeldisabled

Disabled

English

Full Width

Reservation

Component Source

action-button.tsx

import type { ComponentChildren } from 'preact';

/**
 * Red gradient button styles - used for primary user actions
 * Gradient: dark red (#6B1818) to darker red (#2A0808)
 * Border: subtle gray to blend with dark backgrounds
 *
 * Exported for reuse in SubmitButton and other components
 */
export const redGradientButtonClass =
  'bg-linear-to-r from-[#6B1818] to-[#2A0808] text-zd-white rounded-lg border border-zd-white px-hgap-sm py-vgap-sm hover:brightness-110 focus:brightness-110 active:brightness-90 transition-all flex items-center justify-center gap-hgap-2xs text-sm cursor-pointer';

export interface ActionButtonProps {
  children: ComponentChildren;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

/**
 * ActionButton - Red gradient button for triggering user actions
 *
 * Used for buttons like "入荷通知を受け取る" (Receive stock notification)
 * that trigger dialogs or other user actions.
 *
 * @example
 * ```tsx
 * <ActionButton onClick={() => setDialogOpen(true)}>
 *   入荷通知を受け取る
 * </ActionButton>
 * ```
 */
export const ActionButton = ({
  children,
  onClick,
  disabled = false,
  className,
}: ActionButtonProps) => {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className={`${redGradientButtonClass} disabled:opacity-50 disabled:cursor-not-allowed ${className || ''}`}
    >
      {children}
    </button>
  );
};

export default ActionButton;

Story Source

action-button.stories.tsx

import { ActionButton } from './action-button';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';

/**
 * ActionButton Component
 *
 * A red gradient button used for primary user actions.
 * Features a dark red gradient from left to right with subtle gray border.
 *
 * Common use cases:
 * - Opening dialogs (e.g., "入荷通知を受け取る")
 * - Primary call-to-action buttons
 * - Form submission triggers
 */
export const meta = {
  title: 'Shared/ActionButton',
};

export const controls: ControlsMap = {
  label: { type: 'text', default: '入荷通知を受け取る' },
  disabled: { type: 'boolean', default: false },
};

/**
 * Default state - Japanese text for notify action
 */
export const Default = {
  args: { label: '入荷通知を受け取る', disabled: false },
  render: ({ label, disabled }: { label: string; disabled: boolean }) => (
    <ActionButton disabled={disabled}>{label}</ActionButton>
  ),
};

/**
 * Reservation button variant
 */
export const Reservation = () => <ActionButton>予約する</ActionButton>;

/**
 * English text example
 */
export const English = () => <ActionButton>Notify Me</ActionButton>;

/**
 * Disabled state
 */
export const Disabled = () => <ActionButton disabled>入荷通知を受け取る</ActionButton>;

/**
 * With custom width using className
 */
export const FullWidth = () => (
  <ActionButton className="w-full max-w-[300px]">通知を受け取る</ActionButton>
);

/**
 * Multiple buttons in a row
 */
export const ButtonGroup = () => (
  <div className="flex gap-hgap-sm">
    <ActionButton>入荷通知</ActionButton>
    <ActionButton>予約する</ActionButton>
  </div>
);