Button

Button is the foundational button component. It supports a text label with optional leading and trailing icons, three visual variants (solid, outline, clear), five size presets, and an optional typing animation for the label. Unlike ActionButton, it does not make HTTP requests — it simply calls the provided onClick handler.

Use Button for all standard interactions where you control the logic in the parent component.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | title | string | Yes | — | Label text displayed inside the button. | | onClick | () => void | Yes | — | Callback fired when the button is pressed. | | color | string | No | "primary" | Theme color key or any CSS hex/named color. | | borderRadius | number | No | 4 | Border radius in pixels. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the button. | | disabled | boolean | No | false | Disables interaction and reduces opacity. | | startIcon | string | No | — | Icon identifier rendered before the label. | | startIconPaths | string[] | No | — | SVG path data for a custom start icon (alternative to startIcon). | | startIconSize | number | No | — | Override size for the start icon in pixels. | | startIconStyle | React.CSSProperties | No | — | Inline styles applied to the start icon. | | startIconColor | string | No | — | Color override for the start icon. | | endIcon | string | No | — | Icon identifier rendered after the label. | | endIconPaths | string[] | No | — | SVG path data for a custom end icon. | | endIconSize | number | No | — | Override size for the end icon in pixels. | | endIconStyle | React.CSSProperties | No | — | Inline styles applied to the end icon. | | endIconColor | string | No | — | Color override for the end icon. | | hasShadow | boolean | No | true | Whether to apply a drop shadow. | | style | React.CSSProperties | No | — | Inline styles applied to the button container. | | titleStyle | React.CSSProperties | No | — | Inline styles applied to the label text. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls padding, font size, and icon size. | | className | string | No | "button" | CSS class name applied to the wrapper. | | animateTitle | boolean | No | false | When true, the label appears with a typing animation. | | animationSpeed | number | No | 50 | Speed of the typing animation in milliseconds per character. | | onAnimationComplete | () => void | No | — | Callback fired when the typing animation finishes. |

Usage

Basic

import Button from '@/components/buttons/Button';

export default function Example() {
  return (
    <Button
      title="Confirm"
      onClick={() => console.log('confirmed')}
    />
  );
}

Outline variant with icons

import Button from '@/components/buttons/Button';

export default function Example() {
  return (
    <Button
      title="Add to Cart"
      onClick={() => {}}
      type="outline"
      color="primary"
      startIcon="cart"
      size="sm"
    />
  );
}

Clear style for inline actions

import Button from '@/components/buttons/Button';

export default function Example() {
  return (
    <Button
      title="Cancel"
      onClick={() => {}}
      type="clear"
      color="text"
      hasShadow={false}
    />
  );
}

Typing animation

import Button from '@/components/buttons/Button';

export default function Example() {
  return (
    <Button
      title="Processing your request..."
      onClick={() => {}}
      animateTitle
      animationSpeed={30}
      onAnimationComplete={() => console.log('done')}
    />
  );
}