improvement(ui): use chips for ordinary product actions

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
-  Button,
+  Chip,
   ChipCombobox,
   ChipConfirmModal,
   Columns2,
@@ -2057,13 +2057,9 @@ function FilesContent() {
           </div>
         )}
         {hasActiveFilters && (
-          <Button
-            variant='ghost'
-            onClick={clearFileFilters}
-            className='h-[32px] w-full text-caption hover-hover:bg-[var(--surface-active)]'
-          >
+          <Chip fullWidth onClick={clearFileFilters}>
             Clear all filters
-          </Button>
+          </Chip>
         )}
       </div>
     )

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -14,6 +14,7 @@ import {
 import {
   Button,
   Calendar,
+  Chip,
   ChipCombobox,
   type ComboboxOption,
   cn,
@@ -1584,13 +1585,9 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
       </div>
 
       {filtersActive && (
-        <Button
-          variant='active'
-          onClick={handleClearFilters}
-          className='h-[32px] w-full rounded-md'
-        >
+        <Chip variant='border-shadow' fullWidth onClick={handleClearFilters}>
           Clear All Filters
-        </Button>
+        </Chip>
       )}
     </div>
   )

apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx

@@ -443,9 +443,8 @@ export function Admin() {
                     Page {currentPage} of {totalPages} ({usersData.total} users)
                   </span>
                   <div className='flex gap-1'>
-                    <Button
-                      variant='active'
-                      className='h-[28px] text-caption'
+                    <Chip
+                      variant='border-shadow'
                       onClick={() =>
                         setAdminParams((prev) => ({
                           offset: Math.max(0, prev.offset - PAGE_SIZE),
@@ -454,17 +453,16 @@ export function Admin() {
                       disabled={usersOffset === 0 || usersLoading}
                     >
                       Previous
-                    </Button>
-                    <Button
-                      variant='active'
-                      className='h-[28px] text-caption'
+                    </Chip>
+                    <Chip
+                      variant='border-shadow'
                       onClick={() =>
                         setAdminParams((prev) => ({ offset: prev.offset + PAGE_SIZE }))
                       }
                       disabled={usersOffset + PAGE_SIZE >= (usersData?.total ?? 0) || usersLoading}
                     >
                       Next
-                    </Button>
+                    </Chip>
                   </div>
                 </div>
               )}

apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import {
   Badge,
-  Button,
+  Chip,
   ChipCopyInput,
   ChipInput,
   ChipModalTabs,
@@ -434,14 +434,13 @@ function LicensesTab({ environment }: { environment: MothershipEnv }) {
             className='w-[160px]'
           />
         </div>
-        <Button
+        <Chip
           variant='primary'
-          className='h-[32px]'
           onClick={handleGenerate}
           disabled={generateLicense.isPending || !newName.trim()}
         >
           {generateLicense.isPending ? 'Generating...' : 'Generate'}
-        </Button>
+        </Chip>
       </div>
 
       {generatedKey && (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/components/replacement-controls/replacement-controls.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, ChipCombobox, ChipInput } from '@sim/emcn'
+import { Chip, ChipCombobox, ChipInput } from '@sim/emcn'
 import type { WorkflowSearchReplacementOption } from '@/lib/workflows/search-replace/types'
 
 interface ReplacementControlsProps {
@@ -60,22 +60,20 @@ export function ReplacementControls({
           {eligibleCount} replaceable match{eligibleCount === 1 ? '' : 'es'}
         </span>
         <div className='flex gap-1.5'>
-          <Button
-            className='h-8 text-xs'
-            variant='default'
+          <Chip
+            variant='border-shadow'
             disabled={disabled || isApplying || !canReplaceActive}
             onClick={onReplaceActive}
           >
             Replace
-          </Button>
-          <Button
-            className='h-8 text-xs'
-            variant='active'
+          </Chip>
+          <Chip
+            variant='border-shadow'
             disabled={disabled || isApplying || !canReplaceAll}
             onClick={onReplaceAll}
           >
             {isApplying ? 'Replacing...' : 'Replace All'}
-          </Button>
+          </Chip>
         </div>
       </div>
     </div>

apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx

@@ -2,7 +2,7 @@
 
 import type React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Button, cn, OverflowText, Tooltip } from '@sim/emcn'
+import { Chip, cn, OverflowText, Tooltip } from '@sim/emcn'
 import { ArrowLeft } from '@sim/emcn/icons'
 import { redactApiKeys } from '@/lib/core/security/redaction'
 import { PreviewEditor } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor'
@@ -295,14 +295,9 @@ export function Preview({
         <div className='absolute top-3 left-[12px] z-20 flex items-center gap-1.5'>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={handleGoBack}
-                className='flex h-[28px] gap-[5px] rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-xs hover-hover:bg-[var(--surface-4)]'
-              >
-                <ArrowLeft className='size-[12px]' />
-                <span className='text-caption'>Back</span>
-              </Button>
+              <Chip variant='border-shadow' leftIcon={ArrowLeft} onClick={handleGoBack}>
+                Back
+              </Chip>
             </Tooltip.Trigger>
             <Tooltip.Content side='bottom'>Go back to parent workflow</Tooltip.Content>
           </Tooltip.Root>