feat: introduce button variant props

src/components/Attachment/AttachmentActions.tsx

@@ -70,10 +70,9 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
         <span>{text}</span>
         {actions.map((action, index) => (
           <Button
+            appearance='ghost'
             className={clsx(
               `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`,
-              'str-chat__button--ghost',
-              'str-chat__button--secondary',
             )}
             data-testid={`${action.name}`}
             data-value={action.value}
@@ -82,6 +81,7 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
             ref={(element) => {
               buttonRefs.current[index] = element;
             }}
+            variant='secondary'
           >
             {action.text ? (knownActionText[action.text] ?? t(action.text)) : null}
           </Button>

src/components/Attachment/components/PlaybackRateButton.tsx

@@ -9,7 +9,6 @@ export const PlaybackRateButton = ({ children, onClick }: PlaybackRateButtonProp
     className={clsx('str-chat__message_attachment__playback-rate-button')}
     data-testid='playback-rate-button'
     onClick={onClick}
-    type='button'
   >
     {children}
   </Button>

src/components/Button/Button.tsx

@@ -2,18 +2,56 @@ import type { ComponentProps } from 'react';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
 
-export type ButtonProps = ComponentProps<'button'>;
+export type ButtonVariant = 'primary' | 'secondary' | 'danger';
+export type ButtonAppearance = 'solid' | 'outline' | 'ghost';
+export type ButtonSize = 'lg' | 'md' | 'sm';
+
+export type ButtonProps = ComponentProps<'button'> & {
+  /** Semantic variant: primary, secondary, or danger (maps to destructive in styles). */
+  variant?: ButtonVariant;
+  /** Visual style: solid, outline, or ghost. */
+  appearance?: ButtonAppearance;
+  /** When true, uses full border-radius for icon-only/pill shape. */
+  circular?: boolean;
+  /** Size: lg, md, or sm. */
+  size?: ButtonSize;
+};
+
+const variantToClass: Record<ButtonVariant, string> = {
+  danger: 'str-chat__button--destructive',
+  primary: 'str-chat__button--primary',
+  secondary: 'str-chat__button--secondary',
+};
+
+const appearanceToClass: Record<ButtonAppearance, string> = {
+  ghost: 'str-chat__button--ghost',
+  outline: 'str-chat__button--outline',
+  solid: 'str-chat__button--solid',
+};
+
+const sizeToClass: Record<ButtonSize, string> = {
+  lg: 'str-chat__button--size-lg',
+  md: 'str-chat__button--size-md',
+  sm: 'str-chat__button--size-sm',
+};
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { className, ...props },
+  { appearance, circular, className, size, variant, ...props },
   ref,
 ) {
   return (
     <button
       ref={ref}
       type='button'
       {...props}
-      className={clsx('str-chat__button', className)}
+      className={clsx(
+        'str-chat__button',
+        variant != null && variantToClass[variant],
+        appearance != null && appearanceToClass[appearance],
+        circular && 'str-chat__button--circular',
+        size != null && sizeToClass[size],
+        className,
+      )}
     />
   );
 });

src/components/Button/PlayButton.tsx

@@ -9,16 +9,13 @@ export type PlayButtonProps = ComponentProps<'button'> & {
 
 export const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => (
   <Button
-    {...props}
-    className={clsx(
-      'str-chat__button-play',
-      'str-chat__button--secondary',
-      'str-chat__button--outline',
-      'str-chat__button--size-sm',
-      'str-chat__button--circular',
-      className,
-    )}
+    appearance='outline'
+    circular
+    className={clsx('str-chat__button-play', className)}
     data-testid={isPlaying ? 'pause-audio' : 'play-audio'}
+    size='sm'
+    variant='secondary'
+    {...props}
   >
     {isPlaying ? <IconPause /> : <IconPlaySolid />}
   </Button>

src/components/ChatView/ChatView.tsx

@@ -142,14 +142,11 @@ export const ChatViewSelectorButton = ({
   ...props
 }: ButtonProps & { Icon?: ComponentType; text?: string }) => (
   <Button
-    {...props}
-    className={clsx(
-      'str-chat__chat-view__selector-button',
-      'str-chat__button--ghost',
-      'str-chat__button--secondary',
-      className,
-    )}
+    appearance='ghost'
+    className={clsx('str-chat__chat-view__selector-button', className)}
     role='tab'
+    variant='secondary'
+    {...props}
   >
     {text ? (
       <>

src/components/Dialog/components/Callout.tsx

@@ -54,15 +54,12 @@ const DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogPro
   <div className='str-chat__callout'>
     {children}
     <Button
-      className={clsx(
-        className,
-        'str-chat__callout__close-button',
-        'str-chat__button--ghost',
-        'str-chat__button--secondary',
-        'str-chat__button--size-sm',
-        'str-chat__button--circular',
-      )}
+      appearance='ghost'
+      circular
+      className={clsx(className, 'str-chat__callout__close-button')}
       onClick={onClose}
+      size='sm'
+      variant='secondary'
     >
       <IconCrossMedium />
     </Button>

src/components/Dialog/components/Prompt.tsx

@@ -27,14 +27,12 @@ const PromptHeader = ({
   <div className={clsx('str-chat__prompt__header', className)}>
     {goBack && (
       <Button
-        className={clsx(
-          'str-chat__prompt__header__go-back-button',
-          'str-chat__button--secondary',
-          'str-chat__button--ghost',
-          'str-chat__button--circular',
-          'str-chat__button--size-sm',
-        )}
+        appearance='ghost'
+        circular
+        className='str-chat__prompt__header__go-back-button'
         onClick={goBack}
+        size='sm'
+        variant='secondary'
       >
         <IconArrowLeft />
       </Button>
@@ -47,14 +45,12 @@ const PromptHeader = ({
     </div>
     {close && (
       <Button
-        className={clsx(
-          'str-chat__prompt__header__close-button',
-          'str-chat__button--secondary',
-          'str-chat__button--ghost',
-          'str-chat__button--size-sm',
-          'str-chat__button--circular',
-        )}
+        appearance='ghost'
+        circular
+        className='str-chat__prompt__header__close-button'
         onClick={close}
+        size='sm'
+        variant='secondary'
       >
         <IconCrossMedium />
       </Button>
@@ -88,27 +84,21 @@ const PromptFooterControls = ({ children, className }: PromptFooterControlsProps
 
 const PromptFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (
   <Button
+    appearance='ghost'
+    className={clsx('str-chat__prompt__footer__controls-button', className)}
+    size='md'
+    variant='secondary'
     {...props}
-    className={clsx(
-      'str-chat__prompt__footer__controls-button',
-      'str-chat__button--secondary',
-      'str-chat__button--ghost',
-      'str-chat__button--size-md',
-      className,
-    )}
   />
 );
 
 const PromptFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (
   <Button
+    appearance='solid'
+    className={clsx('str-chat__prompt__footer__controls-button', className)}
+    size='md'
+    variant='primary'
     {...props}
-    className={clsx(
-      'str-chat__prompt__footer__controls-button',
-      'str-chat__button--primary',
-      'str-chat__button--solid',
-      'str-chat__button--size-md',
-      className,
-    )}
   />
 );
 

src/components/Form/NumericInput.tsx

@@ -116,15 +116,15 @@ export const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(
         )}
         <div className={clsx('str-chat__form-numeric-input__wrapper')}>
           <Button
+            appearance='outline'
             aria-label='Decrease value'
+            circular
             className={clsx(
               'str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--decrement',
-              'str-chat__button--circular',
-              'str-chat__button--secondary',
-              'str-chat__button--outline',
             )}
             disabled={disabled || atMin}
             onClick={handleDecrement}
+            variant='secondary'
           >
             <span aria-hidden className='str-chat__form-numeric-input__stepper-icon'>
               −
@@ -143,16 +143,16 @@ export const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(
             {...inputProps}
           />
           <Button
+            appearance='outline'
             aria-label='Increase value'
+            circular
             className={clsx(
               'str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--increment',
-              'str-chat__button--circular',
-              'str-chat__button--secondary',
-              'str-chat__button--outline',
-              'str-chat__button--size-sm',
             )}
             disabled={disabled || atMax}
             onClick={handleIncrement}
+            size='sm'
+            variant='secondary'
           >
             <IconPlusSmall className='str-chat__form-numeric-input__stepper-icon' />
           </Button>

src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import { useMessageInputContext } from '../../../context';
 import { isRecording } from './recordingStateIdentity';
 import { Button } from '../../Button';
-import clsx from 'clsx';
 
 const ToggleRecordingButton = () => {
   const {
@@ -13,16 +12,14 @@ const ToggleRecordingButton = () => {
 
   return (
     <Button
-      className={clsx(
-        'str-chat__audio_recorder__toggle-recording-button',
-        'str-chat__button--secondary',
-        'str-chat__button--outline',
-        'str-chat__button--size-sm',
-        'str-chat__button--circular',
-      )}
+      appearance='outline'
+      circular
+      className='str-chat__audio_recorder__toggle-recording-button'
       onClick={() =>
         isRecording(recordingState) ? recorder?.pause() : recorder?.resume()
       }
+      size='sm'
+      variant='secondary'
     >
       {isRecording(recordingState) ? <IconPause /> : <IconMicrophone />}
     </Button>
@@ -41,31 +38,27 @@ export const AudioRecorderRecordingControls = () => {
     <div className='str-chat__audio_recorder__recording-controls'>
       {!isRecording(recordingState) && (
         <Button
-          className={clsx(
-            'str-chat__audio_recorder__cancel-button',
-            'str-chat__button--secondary',
-            'str-chat__button--ghost',
-            'str-chat__button--size-sm',
-            'str-chat__button--circular',
-          )}
+          appearance='ghost'
+          circular
+          className='str-chat__audio_recorder__cancel-button'
           data-testid={'cancel-recording-audio-button'}
           disabled={isUploadingFile}
           onClick={recorder.cancel}
+          size='sm'
+          variant='secondary'
         >
           <IconTrashBin />
         </Button>
       )}
       <ToggleRecordingButton />
       <Button
-        className={clsx(
-          'str-chat__audio_recorder__stop-button',
-          'str-chat__button--solid',
-          'str-chat__button--primary',
-          'str-chat__button--size-sm',
-          'str-chat__button--circular',
-        )}
+        appearance='solid'
+        circular
+        className='str-chat__audio_recorder__stop-button'
         data-testid='audio-recorder-stop-button'
         onClick={completeRecording}
+        size='sm'
+        variant='primary'
       >
         {isUploadingFile ? <LoadingIndicatorIcon /> : <CheckSignIcon />}
       </Button>

src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx

@@ -5,7 +5,6 @@ import { useAttachmentManagerState } from '../../MessageInput';
 import { useComponentContext, useMessageInputContext } from '../../../context';
 import { Callout, useDialogOnNearestManager } from '../../Dialog';
 import { Button } from '../../Button';
-import clsx from 'clsx';
 import { IconMicrophone } from '../../Icons';
 
 const dialogId = 'recording-permission-denied-notification';
@@ -66,15 +65,13 @@ export const DefaultStartRecordingAudioButton = forwardRef<
 >(function StartRecordingAudioButton(props, ref) {
   return (
     <Button
+      appearance='ghost'
       aria-label='Start recording audio'
-      className={clsx(
-        'str-chat__start-recording-audio-button',
-        'str-chat__button--ghost',
-        'str-chat__button--secondary',
-        'str-chat__button--size-sm',
-        'str-chat__button--circular',
-      )}
+      circular
+      className='str-chat__start-recording-audio-button'
       data-testid='start-recording-audio-button'
+      size='sm'
+      variant='secondary'
       {...props}
       ref={ref}
     >

src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx

@@ -57,15 +57,13 @@ export const AudioRecordingPlayback = ({
       })}
     >
       <Button
-        className={clsx(
-          'str-chat__audio_recorder__toggle-playback-button',
-          'str-chat__button--secondary',
-          'str-chat__button--ghost',
-          'str-chat__button--size-sm',
-          'str-chat__button--circular',
-        )}
+        appearance='ghost'
+        circular
+        className='str-chat__audio_recorder__toggle-playback-button'
         data-testid='audio-recording-preview-toggle-play-btn'
         onClick={audioPlayer.togglePlay}
+        size='sm'
+        variant='secondary'
       >
         {isPlaying ? <IconPause /> : <IconPlaySolid />}
       </Button>