diff --git a/src/components/Attachment/AttachmentActions.tsx b/src/components/Attachment/AttachmentActions.tsx
index 938cd031e..ced98d4cd 100644
--- a/src/components/Attachment/AttachmentActions.tsx
+++ b/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>
diff --git a/src/components/Attachment/components/PlaybackRateButton.tsx b/src/components/Attachment/components/PlaybackRateButton.tsx
index 008037cb6..503b5aee3 100644
--- a/src/components/Attachment/components/PlaybackRateButton.tsx
+++ b/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>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 8637f1d20..f213cf260 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -2,10 +2,41 @@ 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 (
@@ -13,7 +44,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function 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,
+      )}
     />
   );
 });
diff --git a/src/components/Button/PlayButton.tsx b/src/components/Button/PlayButton.tsx
index 459f79014..3e467a34f 100644
--- a/src/components/Button/PlayButton.tsx
+++ b/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>
diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx
index 51053d712..7e46393cc 100644
--- a/src/components/ChatView/ChatView.tsx
+++ b/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 ? (
       <>
diff --git a/src/components/Dialog/components/Callout.tsx b/src/components/Dialog/components/Callout.tsx
index 19dc125dd..822a50be9 100644
--- a/src/components/Dialog/components/Callout.tsx
+++ b/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>
diff --git a/src/components/Dialog/components/Prompt.tsx b/src/components/Dialog/components/Prompt.tsx
index 42ff6870f..96de6b8b3 100644
--- a/src/components/Dialog/components/Prompt.tsx
+++ b/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,
-    )}
   />
 );
 
diff --git a/src/components/Form/NumericInput.tsx b/src/components/Form/NumericInput.tsx
index 3965c8e16..451284f7d 100644
--- a/src/components/Form/NumericInput.tsx
+++ b/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>
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
index c2ccc4d71..42f07c4ef 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
+++ b/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>
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
index 47581d3fd..e7ba6596a 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx
+++ b/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}
     >
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
index 68a5ead13..abdeb35bc 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx
+++ b/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>
diff --git a/src/components/MessageActions/DeleteMessageAlert.tsx b/src/components/MessageActions/DeleteMessageAlert.tsx
index 254a72ef8..deebb4dea 100644
--- a/src/components/MessageActions/DeleteMessageAlert.tsx
+++ b/src/components/MessageActions/DeleteMessageAlert.tsx
@@ -1,6 +1,5 @@
 import { Alert } from '../Dialog';
 import { Button } from '../Button';
-import clsx from 'clsx';
 import React from 'react';
 import { useTranslationContext } from '../../context';
 import type { ModalProps } from '../Modal';
@@ -22,26 +21,22 @@ export const DeleteMessageAlert = ({ onClose, onDelete }: DeleteMessageAlertProp
       />
       <Alert.Actions>
         <Button
-          className={clsx(
-            'str-chat__delete-message-alert__delete-button',
-            'str-chat__button--outline',
-            'str-chat__button--destructive',
-            'str-chat__button--size-md',
-          )}
+          appearance='outline'
+          className='str-chat__delete-message-alert__delete-button'
           data-testid='delete-message-alert-delete-button'
           onClick={onDelete}
+          size='md'
+          variant='danger'
         >
           {t('Delete message')}
         </Button>
         <Button
-          className={clsx(
-            'str-chat__delete-message-alert__cancel-button',
-            'str-chat__button--outline',
-            'str-chat__button--secondary',
-            'str-chat__button--size-md',
-          )}
+          appearance='outline'
+          className='str-chat__delete-message-alert__cancel-button'
           data-testid='delete-message-alert-cancel-button'
           onClick={onClose}
+          size='md'
+          variant='secondary'
         >
           {t('Cancel')}
         </Button>
diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx
index dab95c2ff..7e767d812 100644
--- a/src/components/MessageActions/MessageActions.tsx
+++ b/src/components/MessageActions/MessageActions.tsx
@@ -98,20 +98,18 @@ export const MessageActions = ({
       {dropdownActionSet.length > 0 && (
         <>
           <Button
+            appearance='ghost'
             aria-expanded={dropdownDialogIsOpen}
             aria-haspopup='true'
             aria-label={t('aria/Open Message Actions Menu')}
-            className={clsx(
-              'str-chat__message-actions-box-button',
-              'str-chat__button--ghost',
-              'str-chat__button--secondary',
-              'str-chat__button--circular',
-            )}
+            circular
+            className='str-chat__message-actions-box-button'
             data-testid='message-actions-toggle-button'
             onClick={() => {
               dialog?.toggle();
             }}
             ref={setActionsBoxButtonElement}
+            variant='secondary'
           >
             <ActionsIcon className='str-chat__message-action-icon' />
           </Button>
diff --git a/src/components/MessageActions/QuickMessageActionButton.tsx b/src/components/MessageActions/QuickMessageActionButton.tsx
index 1cfe3d819..249da7034 100644
--- a/src/components/MessageActions/QuickMessageActionButton.tsx
+++ b/src/components/MessageActions/QuickMessageActionButton.tsx
@@ -4,13 +4,10 @@ import React from 'react';
 
 export const QuickMessageActionsButton = ({ className, ...props }: ButtonProps) => (
   <Button
+    appearance='ghost'
+    circular
+    className={clsx('str-chat__message-actions-box-button', className)}
+    variant='secondary'
     {...props}
-    className={clsx(
-      'str-chat__message-actions-box-button',
-      'str-chat__button--ghost',
-      'str-chat__button--secondary',
-      'str-chat__button--circular',
-      className,
-    )}
   />
 );
diff --git a/src/components/MessageBounce/MessageBouncePrompt.tsx b/src/components/MessageBounce/MessageBouncePrompt.tsx
index f49d3b993..b295a4006 100644
--- a/src/components/MessageBounce/MessageBouncePrompt.tsx
+++ b/src/components/MessageBounce/MessageBouncePrompt.tsx
@@ -5,7 +5,6 @@ import type { MouseEventHandler, PropsWithChildren } from 'react';
 
 import type { ModalProps } from '../Modal';
 import { Button } from '../Button';
-import clsx from 'clsx';
 import { IconExclamationCircle } from '../Icons';
 import { Alert } from '../Dialog';
 
@@ -41,38 +40,32 @@ export function MessageBouncePrompt({ children, onClose }: MessageBouncePromptPr
       </Alert.Header>
       <Alert.Actions className={'str-chat__message-bounce-actions'}>
         <Button
-          className={clsx(
-            'str-chat__message-bounce-delete',
-            'str-chat__button--outline',
-            'str-chat__button--destructive',
-            'str-chat__button--size-md',
-          )}
+          appearance='outline'
+          className='str-chat__message-bounce-delete'
           data-testid='message-bounce-delete'
           onClick={createHandler(handleDelete)}
+          size='md'
+          variant='danger'
         >
           {t('Delete')}
         </Button>
         <Button
-          className={clsx(
-            'str-chat__message-bounce-edit',
-            'str-chat__button--outline',
-            'str-chat__button--secondary',
-            'str-chat__button--size-md',
-          )}
+          appearance='outline'
+          className='str-chat__message-bounce-edit'
           data-testid='message-bounce-edit'
           onClick={createHandler(handleEdit)}
+          size='md'
+          variant='secondary'
         >
           {t('Edit Message')}
         </Button>
         <Button
-          className={clsx(
-            'str-chat__message-bounce-send',
-            'str-chat__button--outline',
-            'str-chat__button--secondary',
-            'str-chat__button--size-md',
-          )}
+          appearance='outline'
+          className='str-chat__message-bounce-send'
           data-testid='message-bounce-send'
           onClick={createHandler(handleRetry)}
+          size='md'
+          variant='secondary'
         >
           {t('Send Anyway')}
         </Button>
diff --git a/src/components/MessageInput/AttachmentPreviewList/MediaAttachmentPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/MediaAttachmentPreview.tsx
index 4ace7b6f4..8cead490e 100644
--- a/src/components/MessageInput/AttachmentPreviewList/MediaAttachmentPreview.tsx
+++ b/src/components/MessageInput/AttachmentPreviewList/MediaAttachmentPreview.tsx
@@ -109,16 +109,14 @@ export const MediaAttachmentPreview = ({
 
           {hasRetriableError && (
             <Button
+              appearance='solid'
               aria-label={t('aria/Retry upload')}
-              className={clsx(
-                'str-chat__attachment-preview-media__retry-upload-button',
-                'str-chat__button--solid',
-                'str-chat__button--destructive',
-                'str-chat__button--size-sm',
-                'str-chat__button--circular',
-              )}
+              circular
+              className='str-chat__attachment-preview-media__retry-upload-button'
               data-testid='video-preview-item-retry-button'
               onClick={retry}
+              size='sm'
+              variant='danger'
             >
               <IconArrowRotateClockwise />
             </Button>
diff --git a/src/components/MessageInput/AttachmentSelector/AttachmentSelector.tsx b/src/components/MessageInput/AttachmentSelector/AttachmentSelector.tsx
index f0f71b218..287972e60 100644
--- a/src/components/MessageInput/AttachmentSelector/AttachmentSelector.tsx
+++ b/src/components/MessageInput/AttachmentSelector/AttachmentSelector.tsx
@@ -65,15 +65,12 @@ export const AttachmentSelectorButton = forwardRef<HTMLButtonElement, ButtonProp
   function AttachmentSelectorButton({ className, ...props }, ref) {
     return (
       <Button
-        className={clsx(
-          'str-chat__attachment-selector__menu-button',
-          'str-chat__button--outline',
-          'str-chat__button--secondary',
-          'str-chat__button--size-lg',
-          'str-chat__button--circular',
-          className,
-        )}
+        appearance='outline'
+        circular
+        className={clsx('str-chat__attachment-selector__menu-button', className)}
         data-testid='invoke-attachment-selector-button'
+        size='lg'
+        variant='secondary'
         {...props}
         ref={ref}
       >
diff --git a/src/components/MessageInput/RemoveAttachmentPreviewButton.tsx b/src/components/MessageInput/RemoveAttachmentPreviewButton.tsx
index aeee2f4d4..ae3964bf7 100644
--- a/src/components/MessageInput/RemoveAttachmentPreviewButton.tsx
+++ b/src/components/MessageInput/RemoveAttachmentPreviewButton.tsx
@@ -15,17 +15,15 @@ export const RemoveAttachmentPreviewButton = ({
   const { t } = useTranslationContext();
   return (
     <Button
+      appearance='solid'
       aria-label={t('aria/Remove attachment')}
-      className={clsx(
-        'str-chat__attachment-preview__remove-button',
-        'str-chat__button--solid',
-        'str-chat__button--circular',
-        className,
-      )}
+      circular
+      className={clsx('str-chat__attachment-preview__remove-button', className)}
       data-testid='preview-item-delete-button'
+      disabled={uploadState === 'uploading'}
       type='button'
+      variant='secondary'
       {...props}
-      disabled={uploadState === 'uploading'}
     >
       <IconCrossSmall />
     </Button>
diff --git a/src/components/MessageInput/SendButton.tsx b/src/components/MessageInput/SendButton.tsx
index b71fbb209..9c60655b8 100644
--- a/src/components/MessageInput/SendButton.tsx
+++ b/src/components/MessageInput/SendButton.tsx
@@ -3,7 +3,6 @@ import { useMessageComposerHasSendableData } from './hooks';
 import { useTranslationContext } from '../../context';
 import { IconPaperPlane } from '../Icons';
 import { Button } from '../Button';
-import clsx from 'clsx';
 
 export type SendButtonProps = {
   sendMessage: (event: React.BaseSyntheticEvent) => void;
@@ -14,18 +13,15 @@ export const SendButton = ({ children, sendMessage, ...rest }: SendButtonProps)
   const hasSendableData = useMessageComposerHasSendableData();
   return (
     <Button
+      appearance='solid'
       aria-label={t('aria/Send')}
-      className={clsx(
-        'str-chat__send-button',
-        'str-chat__button--solid',
-        'str-chat__button--primary',
-        'str-chat__button--size-sm',
-        'str-chat__button--circular',
-      )}
+      circular
+      className='str-chat__send-button'
       data-testid='send-button'
       disabled={!hasSendableData}
       onClick={sendMessage}
-      type='button'
+      size='sm'
+      variant='primary'
       {...rest}
     >
       {children ?? <IconPaperPlane />}
diff --git a/src/components/MessageList/MessageList.tsx b/src/components/MessageList/MessageList.tsx
index d1cf2823f..e27c5c61d 100644
--- a/src/components/MessageList/MessageList.tsx
+++ b/src/components/MessageList/MessageList.tsx
@@ -288,6 +288,16 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
                   <div key='bottom' />
                 </InfiniteScroll>
               )}
+              <NewMessageNotification
+                newMessageCount={channelUnreadUiState?.unread_messages}
+                showNotification={hasNewMessages || hasMoreNewer}
+              />
+              <ScrollToLatestMessageButton
+                isMessageListScrolledToBottom={isMessageListScrolledToBottom}
+                isNotAtLatestMessageSet={hasMoreNewer}
+                onClick={scrollToBottomFromNotification}
+                threadList={threadList}
+              />
             </div>
             <NewMessageNotification
               newMessageCount={channelUnreadUiState?.unread_messages}
diff --git a/src/components/MessageList/ScrollToLatestMessageButton.tsx b/src/components/MessageList/ScrollToLatestMessageButton.tsx
index 25cb47687..6d4b4cc9b 100644
--- a/src/components/MessageList/ScrollToLatestMessageButton.tsx
+++ b/src/components/MessageList/ScrollToLatestMessageButton.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import clsx from 'clsx';
 
 import { useChannelStateContext, useChatContext } from '../../context';
 
@@ -86,16 +85,14 @@ const UnMemoizedScrollToLatestMessageButton = (
   return (
     <div className='str-chat__jump-to-latest-message'>
       <Button
+        appearance='outline'
         aria-live='polite'
-        className={clsx(
-          'str-chat__jump-to-latest-message__button',
-          'str-chat__button--secondary',
-          'str-chat__button--outline',
-          'str-chat__button--size-md',
-          'str-chat__button--circular',
-        )}
+        circular
+        className='str-chat__jump-to-latest-message__button'
         data-testid='scroll-to-latest-message-button'
         onClick={onClick}
+        size='md'
+        variant='secondary'
       >
         <IconArrowDown />
       </Button>
diff --git a/src/components/MessageList/UnreadMessagesNotification.tsx b/src/components/MessageList/UnreadMessagesNotification.tsx
index c2e675dab..c49dcb7d2 100644
--- a/src/components/MessageList/UnreadMessagesNotification.tsx
+++ b/src/components/MessageList/UnreadMessagesNotification.tsx
@@ -35,18 +35,16 @@ export const UnreadMessagesNotification = ({
       data-testid='unread-messages-notification'
     >
       <Button
-        className={clsx('str-chat__button--secondary', 'str-chat__button--outline')}
+        appearance='outline'
         onClick={() => jumpToFirstUnreadMessage(queryMessageLimit)}
+        variant='secondary'
       >
         <IconArrowUp />
         {unreadCount && showCount
           ? t('{{count}} unread', { count: unreadCount })
           : t('Unread messages')}
       </Button>
-      <Button
-        className={clsx('str-chat__button--secondary', 'str-chat__button--outline')}
-        onClick={() => markRead()}
-      >
+      <Button appearance='outline' onClick={() => markRead()} variant='secondary'>
         <IconCrossMedium />
       </Button>
     </div>
diff --git a/src/components/MessageList/UnreadMessagesSeparator.tsx b/src/components/MessageList/UnreadMessagesSeparator.tsx
index 245481ed3..5dcc158d4 100644
--- a/src/components/MessageList/UnreadMessagesSeparator.tsx
+++ b/src/components/MessageList/UnreadMessagesSeparator.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useChannelActionContext, useTranslationContext } from '../../context';
 import { Button } from '../Button';
-import clsx from 'clsx';
 import { IconCrossMedium } from '../Icons';
 
 export const UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';
@@ -34,13 +33,11 @@ export const UnreadMessagesSeparator = ({
           : t('Unread messages')}
       </div>
       <Button
-        className={clsx(
-          'str-chat__button--secondary',
-          'str-chat__button--ghost',
-          'str-chat__button--circular',
-          'str-chat__button--size-sm',
-        )}
+        appearance='ghost'
+        circular
         onClick={() => markRead()}
+        size='sm'
+        variant='secondary'
       >
         <IconCrossMedium />
       </Button>
diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx
index 476e7627a..201b13c16 100644
--- a/src/components/MessageList/VirtualizedMessageList.tsx
+++ b/src/components/MessageList/VirtualizedMessageList.tsx
@@ -576,13 +576,13 @@ const VirtualizedMessageListWithContext = (
                 newMessageCount={channelUnreadUiState?.unread_messages}
                 showNotification={newMessagesNotification || hasMoreNewer}
               />
+              <ScrollToLatestMessageButton
+                isMessageListScrolledToBottom={isMessageListScrolledToBottom}
+                isNotAtLatestMessageSet={hasMoreNewer}
+                onClick={scrollToBottom}
+                threadList={threadList}
+              />
             </div>
-            <ScrollToLatestMessageButton
-              isMessageListScrolledToBottom={isMessageListScrolledToBottom}
-              isNotAtLatestMessageSet={hasMoreNewer}
-              onClick={scrollToBottom}
-              threadList={threadList}
-            />
           </DialogManagerProvider>
           {TypingIndicator && <TypingIndicator />}
         </MessageListMainPanel>
diff --git a/src/components/Modal/CloseButtonOnModalOverlay.tsx b/src/components/Modal/CloseButtonOnModalOverlay.tsx
index d7671016d..164fe4ba5 100644
--- a/src/components/Modal/CloseButtonOnModalOverlay.tsx
+++ b/src/components/Modal/CloseButtonOnModalOverlay.tsx
@@ -9,13 +9,10 @@ export const CloseButtonOnModalOverlay = ({
   ...props
 }: ComponentProps<'button'>) => (
   <Button
+    appearance='ghost'
+    circular
+    className={clsx('str-chat__modal__overlay__close-button', className)}
     {...props}
-    className={clsx(
-      'str-chat__modal__overlay__close-button',
-      'str-chat__button--circular',
-      'str-chat__button--ghost',
-      className,
-    )}
   >
     {children ?? <IconCrossMedium />}
   </Button>
diff --git a/src/components/Poll/PollActions/PollAction.tsx b/src/components/Poll/PollActions/PollAction.tsx
index e84a5096e..34d5341eb 100644
--- a/src/components/Poll/PollActions/PollAction.tsx
+++ b/src/components/Poll/PollActions/PollAction.tsx
@@ -31,14 +31,13 @@ export const PollAction = ({
   return (
     <>
       <Button
-        className={clsx(
-          'str-chat__poll-action',
-          'str-chat__button--outline',
-          'str-chat__button--secondary',
-          'str-chat__button--size-md',
-          { 'str-chat__poll-action--additional': isAdditionalAction },
-        )}
+        appearance='outline'
+        className={clsx('str-chat__poll-action', {
+          'str-chat__poll-action--additional': isAdditionalAction,
+        })}
         onClick={openModal}
+        size='md'
+        variant='secondary'
       >
         {buttonText}
       </Button>
diff --git a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
index afc0b56da..712ffacb4 100644
--- a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
+++ b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
@@ -114,13 +114,11 @@ export const OptionFieldSet = () => {
 
 const RemoveOptionButton = ({ className, ...props }: ButtonProps) => (
   <Button
-    className={clsx(
-      'str-chat__form__remove-option-button',
-      'str-chat__button--circular',
-      'str-chat__button--ghost',
-      'str-chat__button--size-sm',
-      className,
-    )}
+    appearance='ghost'
+    circular
+    className={clsx('str-chat__form__remove-option-button', className)}
+    size='sm'
+    variant='secondary'
     {...props}
   >
     <IconCircleMinus />
diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
index d66e1fe30..1ce9d519c 100644
--- a/src/components/Reactions/ReactionSelector.tsx
+++ b/src/components/Reactions/ReactionSelector.tsx
@@ -5,6 +5,7 @@ import { useDialog } from '../Dialog';
 import { defaultReactionOptions } from './reactionOptions';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
+import { Button } from '../Button';
 import { IconPlusLarge } from '../Icons';
 
 import type { ReactionResponse } from 'stream-chat';
@@ -73,9 +74,15 @@ const UnMemoizedReactionSelector = (props: ReactionSelectorProps) => {
           </li>
         ))}
       </ul>
-      <button className='str-chat__reaction-selector__add-button str-chat__button str-chat__button--secondary str-chat__button--circular str-chat__button--outline str-chat__button--size-sm'>
+      <Button
+        appearance='outline'
+        circular
+        className='str-chat__reaction-selector__add-button'
+        size='sm'
+        variant='secondary'
+      >
         <IconPlusLarge />
-      </button>
+      </Button>
     </div>
   );
 };
diff --git a/src/components/VideoPlayer/VideoThumbnail.tsx b/src/components/VideoPlayer/VideoThumbnail.tsx
index 9cef99711..2ae5ec9a1 100644
--- a/src/components/VideoPlayer/VideoThumbnail.tsx
+++ b/src/components/VideoPlayer/VideoThumbnail.tsx
@@ -24,15 +24,15 @@ export const VideoThumbnail = ({
       />
       {onPlay ? (
         <Button
+          appearance='solid'
           aria-label={t('Play video')}
+          circular
           className={clsx(
             'str-chat__message-attachment__video-thumbnail__play-indicator',
-            'str-chat__button--secondary',
-            'str-chat__button--solid',
-            'str-chat__button--size-lg',
-            'str-chat__button--circular',
           )}
           onClick={onPlay}
+          size='lg'
+          variant='secondary'
         >
           <IconPlaySolid />
         </Button>
diff --git a/src/plugins/Emojis/EmojiPicker.tsx b/src/plugins/Emojis/EmojiPicker.tsx
index 3af1815c4..974e74b9b 100644
--- a/src/plugins/Emojis/EmojiPicker.tsx
+++ b/src/plugins/Emojis/EmojiPicker.tsx
@@ -9,7 +9,6 @@ import {
   useMessageComposer,
 } from '../../components';
 import { usePopoverPosition } from '../../components/Dialog/hooks/usePopoverPosition';
-import clsx from 'clsx';
 import { useIsCooldownActive } from '../../components/MessageInput/hooks/useIsCooldownActive';
 
 const isShadowRoot = (node: Node): node is ShadowRoot => !!(node as ShadowRoot).host;
@@ -35,14 +34,12 @@ export type EmojiPickerProps = {
   popperOptions?: Partial<{ placement: PopperLikePlacement }>;
 };
 
-const classNames: EmojiPickerProps = {
-  buttonClassName: clsx(
-    'str-chat__emoji-picker-button',
-    'str-chat__button--ghost',
-    'str-chat__button--secondary',
-    'str-chat__button--size-sm',
-    'str-chat__button--circular',
-  ),
+const defaultButtonClassName = 'str-chat__emoji-picker-button';
+
+const classNames: Pick<
+  EmojiPickerProps,
+  'pickerContainerClassName' | 'wrapperClassName'
+> = {
   pickerContainerClassName: 'str-chat__message-textarea-emoji-picker-container',
   wrapperClassName: 'str-chat__message-textarea-emoji-picker',
 };
@@ -68,7 +65,7 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
     refs.setFloating(popperElement);
   }, [popperElement, refs]);
 
-  const { buttonClassName, pickerContainerClassName, wrapperClassName } = classNames;
+  const { pickerContainerClassName, wrapperClassName } = classNames;
 
   const { ButtonIconComponent = IconEmojiSmile } = props;
 
@@ -118,13 +115,17 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
         </div>
       )}
       <Button
+        appearance='ghost'
         aria-expanded={displayPicker}
         aria-label={t('aria/Emoji picker')}
-        className={props.buttonClassName ?? buttonClassName}
+        circular
+        className={props.buttonClassName ?? defaultButtonClassName}
         disabled={isCooldownActive}
         onClick={() => setDisplayPicker((cv) => !cv)}
         ref={setReferenceElement}
+        size='sm'
         type='button'
+        variant='secondary'
       >
         {ButtonIconComponent && <ButtonIconComponent />}
       </Button>