From 9e765e7d93faf14c600c29b960e3177a68b8de17 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 18 Apr 2024 22:03:05 -0700
Subject: [PATCH 1/4] Add plus icon to all table control buttons and links

---
 app/pages/ProjectsPage.tsx                    |  9 +++-----
 app/pages/SiloAccessPage.tsx                  |  7 +++----
 .../project/access/ProjectAccessPage.tsx      |  7 +++----
 app/pages/project/disks/DisksPage.tsx         |  9 +++-----
 app/pages/project/images/ImagesPage.tsx       |  9 ++++----
 app/pages/project/instances/InstancesPage.tsx |  9 ++++----
 .../instances/instance/tabs/NetworkingTab.tsx | 18 +++++++++-------
 app/pages/project/snapshots/SnapshotsPage.tsx | 11 +++++-----
 .../vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx |  7 +++----
 .../vpcs/VpcPage/tabs/VpcSubnetsTab.tsx       |  6 +++---
 app/pages/project/vpcs/VpcsPage.tsx           |  9 +++-----
 app/pages/system/SiloImagesPage.tsx           |  7 +++----
 app/pages/system/networking/IpPoolPage.tsx    | 14 +++++++------
 app/pages/system/networking/IpPoolsPage.tsx   |  9 +++-----
 app/pages/system/silos/SiloIdpsTab.tsx        |  8 +++----
 app/pages/system/silos/SilosPage.tsx          |  9 +++-----
 app/ui/lib/Table.tsx                          | 21 ++++++++++++++-----
 17 files changed, 80 insertions(+), 89 deletions(-)

diff --git a/app/pages/ProjectsPage.tsx b/app/pages/ProjectsPage.tsx
index 2c2a55a9f..6ed013c04 100644
--- a/app/pages/ProjectsPage.tsx
+++ b/app/pages/ProjectsPage.tsx
@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
-import { Link, Outlet, useNavigate } from 'react-router-dom'
+import { Outlet, useNavigate } from 'react-router-dom'
 
 import {
   apiQueryClient,
@@ -23,10 +23,9 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions } from '~/ui/lib/Table'
+import { TableActions, TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 import { useQuickActions } from '../hooks'
@@ -123,9 +122,7 @@ export function ProjectsPage() {
         <PageTitle icon={<Folder24Icon />}>Projects</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.projectsNew()} className={buttonStyle({ size: 'sm' })}>
-          New Project
-        </Link>
+        <TableControlsLink to={pb.projectsNew()}>New Project</TableControlsLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/SiloAccessPage.tsx b/app/pages/SiloAccessPage.tsx
index 573cf9f59..3ce65ba94 100644
--- a/app/pages/SiloAccessPage.tsx
+++ b/app/pages/SiloAccessPage.tsx
@@ -31,10 +31,9 @@ import { confirmDelete } from '~/stores/confirm-delete'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
-import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
+import { TableActions, TableControlsButton, TableEmptyBox } from '~/ui/lib/Table'
 import { identityTypeLabel, roleColor } from '~/util/access'
 import { groupBy, isTruthy } from '~/util/array'
 
@@ -165,9 +164,9 @@ export function SiloAccessPage() {
       </PageHeader>
 
       <TableActions>
-        <Button size="sm" onClick={() => setAddModalOpen(true)}>
+        <TableControlsButton onClick={() => setAddModalOpen(true)}>
           Add user or group
-        </Button>
+        </TableControlsButton>
       </TableActions>
       {siloPolicy && addModalOpen && (
         <SiloAccessAddUserSideModal
diff --git a/app/pages/project/access/ProjectAccessPage.tsx b/app/pages/project/access/ProjectAccessPage.tsx
index 51c1650ba..8ba946736 100644
--- a/app/pages/project/access/ProjectAccessPage.tsx
+++ b/app/pages/project/access/ProjectAccessPage.tsx
@@ -35,10 +35,9 @@ import { confirmDelete } from '~/stores/confirm-delete'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
-import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
+import { TableActions, TableControlsButton, TableEmptyBox } from '~/ui/lib/Table'
 import { TipIcon } from '~/ui/lib/TipIcon'
 import { identityTypeLabel, roleColor } from '~/util/access'
 import { groupBy, isTruthy, sortBy } from '~/util/array'
@@ -199,9 +198,9 @@ export function ProjectAccessPage() {
       </PageHeader>
 
       <TableActions>
-        <Button size="sm" onClick={() => setAddModalOpen(true)}>
+        <TableControlsButton onClick={() => setAddModalOpen(true)}>
           Add user or group
-        </Button>
+        </TableControlsButton>
       </TableActions>
       {projectPolicy && addModalOpen && (
         <ProjectAccessAddUserSideModal
diff --git a/app/pages/project/disks/DisksPage.tsx b/app/pages/project/disks/DisksPage.tsx
index fb591c0e5..cdb5bffb7 100644
--- a/app/pages/project/disks/DisksPage.tsx
+++ b/app/pages/project/disks/DisksPage.tsx
@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback } from 'react'
-import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
+import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
   apiQueryClient,
@@ -27,10 +27,9 @@ import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions } from '~/ui/lib/Table'
+import { TableActions, TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 import { fancifyStates } from '../instances/instance/tabs/common'
@@ -164,9 +163,7 @@ export function DisksPage() {
         <PageTitle icon={<Storage24Icon />}>Disks</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.disksNew({ project })} className={buttonStyle({ size: 'sm' })}>
-          New Disk
-        </Link>
+        <TableControlsLink to={pb.disksNew({ project })}>New Disk</TableControlsLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/project/images/ImagesPage.tsx b/app/pages/project/images/ImagesPage.tsx
index bd2bda08e..587f2ce96 100644
--- a/app/pages/project/images/ImagesPage.tsx
+++ b/app/pages/project/images/ImagesPage.tsx
@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo, useState } from 'react'
-import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
+import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, useApiMutation, useApiQueryClient, type Image } from '@oxide/api'
 import { Images24Icon } from '@oxide/design-system/icons/react'
@@ -19,12 +19,11 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions } from '~/ui/lib/Table'
+import { TableActions, TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -100,9 +99,9 @@ export function ImagesPage() {
         <PageTitle icon={<Images24Icon />}>Images</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.projectImagesNew({ project })} className={buttonStyle({ size: 'sm' })}>
+        <TableControlsLink to={pb.projectImagesNew({ project })}>
           Upload image
-        </Link>
+        </TableControlsLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       {promoteImageName && (
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index 141e2ef1d..e7d30dfbf 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
-import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
   apiQueryClient,
@@ -25,10 +25,9 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions } from '~/ui/lib/Table'
+import { TableActions, TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 import { useMakeInstanceActions } from './actions'
@@ -127,9 +126,9 @@ export function InstancesPage() {
       </PageHeader>
       <TableActions>
         <RefreshButton onClick={refetchInstances} />
-        <Link to={pb.instancesNew({ project })} className={buttonStyle({ size: 'sm' })}>
+        <TableControlsLink to={pb.instancesNew({ project })}>
           New Instance
-        </Link>
+        </TableControlsLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} rowHeight="large" />
     </>
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
index a7cfde45b..d666be8d1 100644
--- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
+++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
@@ -35,9 +35,13 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns, DescriptionCell } from '~/table/columns/common'
 import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
-import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
-import { TableControls, TableEmptyBox, TableTitle } from '~/ui/lib/Table'
+import {
+  TableControls,
+  TableControlsButton,
+  TableEmptyBox,
+  TableTitle,
+} from '~/ui/lib/Table'
 import { TipIcon } from '~/ui/lib/TipIcon'
 import { pb } from '~/util/path-builder'
 
@@ -323,14 +327,13 @@ export function NetworkingTab() {
     <>
       <TableControls>
         <TableTitle id="attached-ips-label">External IPs</TableTitle>
-        <Button
-          size="sm"
+        <TableControlsButton
           onClick={() => setAttachModalOpen(true)}
           disabled={!!disabledReason}
           disabledReason={disabledReason}
         >
           Attach floating IP
-        </Button>
+        </TableControlsButton>
         {attachModalOpen && (
           <AttachFloatingIpModal
             floatingIps={availableIps}
@@ -344,8 +347,7 @@ export function NetworkingTab() {
 
       <TableControls className="mt-8">
         <TableTitle id="nics-label">Network interfaces</TableTitle>
-        <Button
-          size="sm"
+        <TableControlsButton
           onClick={() => setCreateModalOpen(true)}
           disabled={!canUpdateNic}
           disabledReason={
@@ -356,7 +358,7 @@ export function NetworkingTab() {
           }
         >
           Add network interface
-        </Button>
+        </TableControlsButton>
         {createModalOpen && (
           <CreateNetworkInterfaceForm
             onDismiss={() => setCreateModalOpen(false)}
diff --git a/app/pages/project/snapshots/SnapshotsPage.tsx b/app/pages/project/snapshots/SnapshotsPage.tsx
index d8f905ce3..7003f49a3 100644
--- a/app/pages/project/snapshots/SnapshotsPage.tsx
+++ b/app/pages/project/snapshots/SnapshotsPage.tsx
@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback } from 'react'
-import { Link, Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
   apiQueryClient,
@@ -26,10 +26,9 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions } from '~/ui/lib/Table'
+import { TableActions, TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const DiskNameFromId = ({ value }: { value: string }) => {
@@ -136,9 +135,9 @@ export function SnapshotsPage() {
         <PageTitle icon={<Snapshots24Icon />}>Snapshots</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.snapshotsNew({ project })} className={buttonStyle({ size: 'sm' })}>
-          New Snapshot
-        </Link>
+        <TableControlsLink to={pb.snapshotsNew({ project })}>
+          New snapshot
+        </TableControlsLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx b/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx
index 309e3c566..53790446d 100644
--- a/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx
+++ b/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx
@@ -26,9 +26,8 @@ import { TypeValueCell } from '~/table/cells/TypeValueCell'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { Table } from '~/table/Table'
-import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
-import { TableEmptyBox } from '~/ui/lib/Table'
+import { TableControlsButton, TableEmptyBox } from '~/ui/lib/Table'
 import { sortBy } from '~/util/array'
 import { titleCase } from '~/util/str'
 
@@ -134,9 +133,9 @@ export const VpcFirewallRulesTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-2">
-        <Button size="sm" onClick={() => setCreateModalOpen(true)}>
+        <TableControlsButton onClick={() => setCreateModalOpen(true)}>
           New rule
-        </Button>
+        </TableControlsButton>
         {createModalOpen && (
           <CreateFirewallRuleForm
             existingRules={rules}
diff --git a/app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx b/app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx
index 16f721ce0..e3ca6c03a 100644
--- a/app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx
+++ b/app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx
@@ -18,8 +18,8 @@ import { TwoLineCell } from '~/table/cells/TwoLineCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
-import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { TableControlsButton } from '~/ui/lib/Table'
 
 const colHelper = createColumnHelper<VpcSubnet>()
 const staticCols = [
@@ -77,9 +77,9 @@ export const VpcSubnetsTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-2">
-        <Button size="sm" onClick={() => setCreating(true)}>
+        <TableControlsButton onClick={() => setCreating(true)}>
           New subnet
-        </Button>
+        </TableControlsButton>
         {creating && <CreateSubnetForm onDismiss={() => setCreating(false)} />}
         {editing && <EditSubnetForm editing={editing} onDismiss={() => setEditing(null)} />}
       </div>
diff --git a/app/pages/project/vpcs/VpcsPage.tsx b/app/pages/project/vpcs/VpcsPage.tsx
index e15f65f0f..b6cdbc19f 100644
--- a/app/pages/project/vpcs/VpcsPage.tsx
+++ b/app/pages/project/vpcs/VpcsPage.tsx
@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
-import { Link, Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
   apiQueryClient,
@@ -24,10 +24,9 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions } from '~/ui/lib/Table'
+import { TableActions, TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -122,9 +121,7 @@ export function VpcsPage() {
         <PageTitle icon={<Networking24Icon />}>VPCs</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.vpcsNew({ project })} className={buttonStyle({ size: 'sm' })}>
-          New Vpc
-        </Link>
+        <TableControlsLink to={pb.vpcsNew({ project })}>New Vpc</TableControlsLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/system/SiloImagesPage.tsx b/app/pages/system/SiloImagesPage.tsx
index f6fa7937f..a3c100e08 100644
--- a/app/pages/system/SiloImagesPage.tsx
+++ b/app/pages/system/SiloImagesPage.tsx
@@ -28,12 +28,11 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions } from '~/ui/lib/Table'
+import { TableActions, TableControlsButton } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -98,9 +97,9 @@ export function SiloImagesPage() {
         <PageTitle icon={<Images24Icon />}>Silo Images</PageTitle>
       </PageHeader>
       <TableActions>
-        <Button size="sm" onClick={() => setShowModal(true)}>
+        <TableControlsButton onClick={() => setShowModal(true)}>
           Promote image
-        </Button>
+        </TableControlsButton>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       {showModal && <PromoteImageModal onDismiss={() => setShowModal(false)} />}
diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx
index e3602502e..f59e4c845 100644
--- a/app/pages/system/networking/IpPoolPage.tsx
+++ b/app/pages/system/networking/IpPoolPage.tsx
@@ -8,7 +8,7 @@
 
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo, useState } from 'react'
-import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
+import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
   apiQueryClient,
@@ -36,12 +36,16 @@ import { LinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableControls, TableControlsButton, TableControlsText } from '~/ui/lib/Table'
+import {
+  TableControls,
+  TableControlsButton,
+  TableControlsLink,
+  TableControlsText,
+} from '~/ui/lib/Table'
 import { Tabs } from '~/ui/lib/Tabs'
 import { links } from '~/util/links'
 import { pb } from '~/util/path-builder'
@@ -192,9 +196,7 @@ function IpRangesTable() {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-2">
-        <Link to={pb.ipPoolRangeAdd({ pool })} className={buttonStyle({ size: 'sm' })}>
-          Add range
-        </Link>
+        <TableControlsLink to={pb.ipPoolRangeAdd({ pool })}>Add range</TableControlsLink>
       </div>
       <Table columns={columns} emptyState={emptyState} />
     </>
diff --git a/app/pages/system/networking/IpPoolsPage.tsx b/app/pages/system/networking/IpPoolsPage.tsx
index e83d5015d..054feddf0 100644
--- a/app/pages/system/networking/IpPoolsPage.tsx
+++ b/app/pages/system/networking/IpPoolsPage.tsx
@@ -8,7 +8,7 @@
 
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
-import { Link, Outlet, useNavigate } from 'react-router-dom'
+import { Outlet, useNavigate } from 'react-router-dom'
 
 import {
   apiQueryClient,
@@ -27,10 +27,9 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions } from '~/ui/lib/Table'
+import { TableActions, TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -127,9 +126,7 @@ export function IpPoolsPage() {
         <PageTitle icon={<Networking24Icon />}>IP Pools</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.ipPoolsNew()} className={buttonStyle({ size: 'sm' })}>
-          New IP Pool
-        </Link>
+        <TableControlsLink to={pb.ipPoolsNew()}>New IP Pool</TableControlsLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/system/silos/SiloIdpsTab.tsx b/app/pages/system/silos/SiloIdpsTab.tsx
index db7c897bc..dd653889d 100644
--- a/app/pages/system/silos/SiloIdpsTab.tsx
+++ b/app/pages/system/silos/SiloIdpsTab.tsx
@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
-import { Link, Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
 
 import { Cloud24Icon } from '@oxide/design-system/icons/react'
 
@@ -17,8 +17,8 @@ import { LinkCell } from '~/table/cells/LinkCell'
 import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -56,9 +56,7 @@ export function SiloIdpsTab() {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-2">
-        <Link to={pb.siloIdpsNew({ silo })} className={buttonStyle({ size: 'sm' })}>
-          New provider
-        </Link>
+        <TableControlsLink to={pb.siloIdpsNew({ silo })}>New provider</TableControlsLink>
       </div>
       <Table emptyState={<EmptyState />} columns={staticCols} />
       <Outlet />
diff --git a/app/pages/system/silos/SilosPage.tsx b/app/pages/system/silos/SilosPage.tsx
index d5e7a2030..4e50dd24e 100644
--- a/app/pages/system/silos/SilosPage.tsx
+++ b/app/pages/system/silos/SilosPage.tsx
@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
-import { Link, Outlet, useNavigate } from 'react-router-dom'
+import { Outlet, useNavigate } from 'react-router-dom'
 
 import {
   apiQueryClient,
@@ -26,10 +26,9 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
-import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions } from '~/ui/lib/Table'
+import { TableActions, TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -114,9 +113,7 @@ export function SilosPage() {
         <PageTitle icon={<Cloud24Icon />}>Silos</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.silosNew()} className={buttonStyle({ size: 'sm' })}>
-          New silo
-        </Link>
+        <TableControlsLink to={pb.silosNew()}>New silo</TableControlsLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/ui/lib/Table.tsx b/app/ui/lib/Table.tsx
index 3bfeb018b..755b72692 100644
--- a/app/ui/lib/Table.tsx
+++ b/app/ui/lib/Table.tsx
@@ -10,6 +10,8 @@ import React, { useRef, type ReactElement } from 'react'
 import { Link, type LinkProps } from 'react-router-dom'
 import SimpleBar from 'simplebar-react'
 
+import { AddRoundel12Icon } from '@oxide/design-system/icons/react'
+
 import { useIsOverflow } from '~/hooks'
 import { Button, buttonStyle, type ButtonProps } from '~/ui/lib/Button'
 import { classed } from '~/util/classed'
@@ -132,11 +134,20 @@ export const TableEmptyBox = classed.div`flex h-full max-h-[480px] items-center
 export const TableControls = classed.div`mb-4 flex items-end justify-between space-x-8`
 export const TableControlsText = classed.p`max-w-2xl text-sans-md text-secondary`
 
-export const TableControlsButton = (props: ButtonProps) => (
-  <Button size="sm" className="shrink-0" {...props} />
-)
-export const TableControlsLink = (props: LinkProps) => (
-  <Link className={buttonStyle({ size: 'sm' })} {...props} />
+export const TableControlsButton = ({ children, ...props }: ButtonProps) => (
+  <Button size="sm" className="shrink-0" {...props}>
+    <AddRoundel12Icon className="mr-2" />
+    {children}
+  </Button>
 )
+export const TableControlsLink = (props: LinkProps) => {
+  const { children, ...rest } = props
+  return (
+    <Link className={buttonStyle({ size: 'sm' })} {...rest}>
+      <AddRoundel12Icon className="mr-2" />
+      {children}
+    </Link>
+  )
+}
 
 export const TableTitle = classed.div`text-sans-lg text-default`

From 415e040f866f694f3e84afd786608f8414281f4e Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 18 Apr 2024 22:46:45 -0700
Subject: [PATCH 2/4] Switch to CreateButton and CreateLink

---
 app/pages/ProjectsPage.tsx                    |  5 ++--
 app/pages/SiloAccessPage.tsx                  |  7 ++---
 .../project/access/ProjectAccessPage.tsx      |  7 ++---
 app/pages/project/disks/DisksPage.tsx         |  5 ++--
 .../project/floating-ips/FloatingIpsPage.tsx  |  7 ++---
 app/pages/project/images/ImagesPage.tsx       |  7 ++---
 app/pages/project/instances/InstancesPage.tsx |  7 ++---
 .../instances/instance/tabs/NetworkingTab.tsx | 16 ++++------
 app/pages/project/snapshots/SnapshotsPage.tsx |  7 ++---
 .../vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx |  7 ++---
 .../vpcs/VpcPage/tabs/VpcSubnetsTab.tsx       |  6 ++--
 app/pages/project/vpcs/VpcsPage.tsx           |  5 ++--
 app/pages/system/SiloImagesPage.tsx           |  7 +++--
 app/pages/system/networking/IpPoolPage.tsx    | 14 +++------
 app/pages/system/networking/IpPoolsPage.tsx   |  5 ++--
 app/pages/system/silos/SiloIdpsTab.tsx        |  4 +--
 app/pages/system/silos/SiloIpPoolsTab.tsx     |  7 ++---
 app/pages/system/silos/SilosPage.tsx          |  5 ++--
 app/ui/lib/CreateButton.tsx                   | 29 +++++++++++++++++++
 app/ui/lib/Table.tsx                          | 21 --------------
 20 files changed, 86 insertions(+), 92 deletions(-)
 create mode 100644 app/ui/lib/CreateButton.tsx

diff --git a/app/pages/ProjectsPage.tsx b/app/pages/ProjectsPage.tsx
index 6ed013c04..b99f52b8c 100644
--- a/app/pages/ProjectsPage.tsx
+++ b/app/pages/ProjectsPage.tsx
@@ -23,9 +23,10 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsLink } from '~/ui/lib/Table'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 import { useQuickActions } from '../hooks'
@@ -122,7 +123,7 @@ export function ProjectsPage() {
         <PageTitle icon={<Folder24Icon />}>Projects</PageTitle>
       </PageHeader>
       <TableActions>
-        <TableControlsLink to={pb.projectsNew()}>New Project</TableControlsLink>
+        <CreateLink to={pb.projectsNew()}>New Project</CreateLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/SiloAccessPage.tsx b/app/pages/SiloAccessPage.tsx
index 3ce65ba94..9cc108ffd 100644
--- a/app/pages/SiloAccessPage.tsx
+++ b/app/pages/SiloAccessPage.tsx
@@ -31,9 +31,10 @@ import { confirmDelete } from '~/stores/confirm-delete'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
+import { CreateButton } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsButton, TableEmptyBox } from '~/ui/lib/Table'
+import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
 import { identityTypeLabel, roleColor } from '~/util/access'
 import { groupBy, isTruthy } from '~/util/array'
 
@@ -164,9 +165,7 @@ export function SiloAccessPage() {
       </PageHeader>
 
       <TableActions>
-        <TableControlsButton onClick={() => setAddModalOpen(true)}>
-          Add user or group
-        </TableControlsButton>
+        <CreateButton onClick={() => setAddModalOpen(true)}>Add user or group</CreateButton>
       </TableActions>
       {siloPolicy && addModalOpen && (
         <SiloAccessAddUserSideModal
diff --git a/app/pages/project/access/ProjectAccessPage.tsx b/app/pages/project/access/ProjectAccessPage.tsx
index 8ba946736..f75258ebd 100644
--- a/app/pages/project/access/ProjectAccessPage.tsx
+++ b/app/pages/project/access/ProjectAccessPage.tsx
@@ -35,9 +35,10 @@ import { confirmDelete } from '~/stores/confirm-delete'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
+import { CreateButton } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsButton, TableEmptyBox } from '~/ui/lib/Table'
+import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
 import { TipIcon } from '~/ui/lib/TipIcon'
 import { identityTypeLabel, roleColor } from '~/util/access'
 import { groupBy, isTruthy, sortBy } from '~/util/array'
@@ -198,9 +199,7 @@ export function ProjectAccessPage() {
       </PageHeader>
 
       <TableActions>
-        <TableControlsButton onClick={() => setAddModalOpen(true)}>
-          Add user or group
-        </TableControlsButton>
+        <CreateButton onClick={() => setAddModalOpen(true)}>Add user or group</CreateButton>
       </TableActions>
       {projectPolicy && addModalOpen && (
         <ProjectAccessAddUserSideModal
diff --git a/app/pages/project/disks/DisksPage.tsx b/app/pages/project/disks/DisksPage.tsx
index cdb5bffb7..2ed2687e1 100644
--- a/app/pages/project/disks/DisksPage.tsx
+++ b/app/pages/project/disks/DisksPage.tsx
@@ -27,9 +27,10 @@ import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsLink } from '~/ui/lib/Table'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 import { fancifyStates } from '../instances/instance/tabs/common'
@@ -163,7 +164,7 @@ export function DisksPage() {
         <PageTitle icon={<Storage24Icon />}>Disks</PageTitle>
       </PageHeader>
       <TableActions>
-        <TableControlsLink to={pb.disksNew({ project })}>New Disk</TableControlsLink>
+        <CreateLink to={pb.disksNew({ project })}>New Disk</CreateLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/project/floating-ips/FloatingIpsPage.tsx b/app/pages/project/floating-ips/FloatingIpsPage.tsx
index 360d0a0e9..0353917e3 100644
--- a/app/pages/project/floating-ips/FloatingIpsPage.tsx
+++ b/app/pages/project/floating-ips/FloatingIpsPage.tsx
@@ -30,12 +30,13 @@ import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Listbox } from '~/ui/lib/Listbox'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableControls, TableControlsLink, TableControlsText } from '~/ui/lib/Table'
+import { TableControls, TableControlsText } from '~/ui/lib/Table'
 import { links } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
@@ -192,9 +193,7 @@ export function FloatingIpsPage() {
           your instances to be reachable from the internet. Learn more about{' '}
           <ExternalLink href={links.floatingIpsDocs}>managing floating IPs</ExternalLink>.
         </TableControlsText>
-        <TableControlsLink to={pb.floatingIpsNew({ project })}>
-          New Floating IP
-        </TableControlsLink>
+        <CreateLink to={pb.floatingIpsNew({ project })}>New Floating IP</CreateLink>
       </TableControls>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/project/images/ImagesPage.tsx b/app/pages/project/images/ImagesPage.tsx
index 587f2ce96..f94efb5c6 100644
--- a/app/pages/project/images/ImagesPage.tsx
+++ b/app/pages/project/images/ImagesPage.tsx
@@ -19,11 +19,12 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsLink } from '~/ui/lib/Table'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -99,9 +100,7 @@ export function ImagesPage() {
         <PageTitle icon={<Images24Icon />}>Images</PageTitle>
       </PageHeader>
       <TableActions>
-        <TableControlsLink to={pb.projectImagesNew({ project })}>
-          Upload image
-        </TableControlsLink>
+        <CreateLink to={pb.projectImagesNew({ project })}>Upload image</CreateLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       {promoteImageName && (
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index e7d30dfbf..6147e12db 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -25,9 +25,10 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsLink } from '~/ui/lib/Table'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 import { useMakeInstanceActions } from './actions'
@@ -126,9 +127,7 @@ export function InstancesPage() {
       </PageHeader>
       <TableActions>
         <RefreshButton onClick={refetchInstances} />
-        <TableControlsLink to={pb.instancesNew({ project })}>
-          New Instance
-        </TableControlsLink>
+        <CreateLink to={pb.instancesNew({ project })}>New Instance</CreateLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} rowHeight="large" />
     </>
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
index d666be8d1..309f68b31 100644
--- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
+++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
@@ -35,13 +35,9 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns, DescriptionCell } from '~/table/columns/common'
 import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
+import { CreateButton } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
-import {
-  TableControls,
-  TableControlsButton,
-  TableEmptyBox,
-  TableTitle,
-} from '~/ui/lib/Table'
+import { TableControls, TableEmptyBox, TableTitle } from '~/ui/lib/Table'
 import { TipIcon } from '~/ui/lib/TipIcon'
 import { pb } from '~/util/path-builder'
 
@@ -327,13 +323,13 @@ export function NetworkingTab() {
     <>
       <TableControls>
         <TableTitle id="attached-ips-label">External IPs</TableTitle>
-        <TableControlsButton
+        <CreateButton
           onClick={() => setAttachModalOpen(true)}
           disabled={!!disabledReason}
           disabledReason={disabledReason}
         >
           Attach floating IP
-        </TableControlsButton>
+        </CreateButton>
         {attachModalOpen && (
           <AttachFloatingIpModal
             floatingIps={availableIps}
@@ -347,7 +343,7 @@ export function NetworkingTab() {
 
       <TableControls className="mt-8">
         <TableTitle id="nics-label">Network interfaces</TableTitle>
-        <TableControlsButton
+        <CreateButton
           onClick={() => setCreateModalOpen(true)}
           disabled={!canUpdateNic}
           disabledReason={
@@ -358,7 +354,7 @@ export function NetworkingTab() {
           }
         >
           Add network interface
-        </TableControlsButton>
+        </CreateButton>
         {createModalOpen && (
           <CreateNetworkInterfaceForm
             onDismiss={() => setCreateModalOpen(false)}
diff --git a/app/pages/project/snapshots/SnapshotsPage.tsx b/app/pages/project/snapshots/SnapshotsPage.tsx
index 7003f49a3..424104fbe 100644
--- a/app/pages/project/snapshots/SnapshotsPage.tsx
+++ b/app/pages/project/snapshots/SnapshotsPage.tsx
@@ -26,9 +26,10 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsLink } from '~/ui/lib/Table'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const DiskNameFromId = ({ value }: { value: string }) => {
@@ -135,9 +136,7 @@ export function SnapshotsPage() {
         <PageTitle icon={<Snapshots24Icon />}>Snapshots</PageTitle>
       </PageHeader>
       <TableActions>
-        <TableControlsLink to={pb.snapshotsNew({ project })}>
-          New snapshot
-        </TableControlsLink>
+        <CreateLink to={pb.snapshotsNew({ project })}>New snapshot</CreateLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx b/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx
index 53790446d..33c77b565 100644
--- a/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx
+++ b/app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx
@@ -26,8 +26,9 @@ import { TypeValueCell } from '~/table/cells/TypeValueCell'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { Table } from '~/table/Table'
+import { CreateButton } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
-import { TableControlsButton, TableEmptyBox } from '~/ui/lib/Table'
+import { TableEmptyBox } from '~/ui/lib/Table'
 import { sortBy } from '~/util/array'
 import { titleCase } from '~/util/str'
 
@@ -133,9 +134,7 @@ export const VpcFirewallRulesTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-2">
-        <TableControlsButton onClick={() => setCreateModalOpen(true)}>
-          New rule
-        </TableControlsButton>
+        <CreateButton onClick={() => setCreateModalOpen(true)}>New rule</CreateButton>
         {createModalOpen && (
           <CreateFirewallRuleForm
             existingRules={rules}
diff --git a/app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx b/app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx
index e3ca6c03a..dc2552587 100644
--- a/app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx
+++ b/app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx
@@ -18,8 +18,8 @@ import { TwoLineCell } from '~/table/cells/TwoLineCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
+import { CreateButton } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
-import { TableControlsButton } from '~/ui/lib/Table'
 
 const colHelper = createColumnHelper<VpcSubnet>()
 const staticCols = [
@@ -77,9 +77,7 @@ export const VpcSubnetsTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-2">
-        <TableControlsButton onClick={() => setCreating(true)}>
-          New subnet
-        </TableControlsButton>
+        <CreateButton onClick={() => setCreating(true)}>New subnet</CreateButton>
         {creating && <CreateSubnetForm onDismiss={() => setCreating(false)} />}
         {editing && <EditSubnetForm editing={editing} onDismiss={() => setEditing(null)} />}
       </div>
diff --git a/app/pages/project/vpcs/VpcsPage.tsx b/app/pages/project/vpcs/VpcsPage.tsx
index b6cdbc19f..5702634c5 100644
--- a/app/pages/project/vpcs/VpcsPage.tsx
+++ b/app/pages/project/vpcs/VpcsPage.tsx
@@ -24,9 +24,10 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsLink } from '~/ui/lib/Table'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -121,7 +122,7 @@ export function VpcsPage() {
         <PageTitle icon={<Networking24Icon />}>VPCs</PageTitle>
       </PageHeader>
       <TableActions>
-        <TableControlsLink to={pb.vpcsNew({ project })}>New Vpc</TableControlsLink>
+        <CreateLink to={pb.vpcsNew({ project })}>New Vpc</CreateLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/system/SiloImagesPage.tsx b/app/pages/system/SiloImagesPage.tsx
index a3c100e08..f6fa7937f 100644
--- a/app/pages/system/SiloImagesPage.tsx
+++ b/app/pages/system/SiloImagesPage.tsx
@@ -28,11 +28,12 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsButton } from '~/ui/lib/Table'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -97,9 +98,9 @@ export function SiloImagesPage() {
         <PageTitle icon={<Images24Icon />}>Silo Images</PageTitle>
       </PageHeader>
       <TableActions>
-        <TableControlsButton onClick={() => setShowModal(true)}>
+        <Button size="sm" onClick={() => setShowModal(true)}>
           Promote image
-        </TableControlsButton>
+        </Button>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       {showModal && <PromoteImageModal onDismiss={() => setShowModal(false)} />}
diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx
index f59e4c845..dc425e4fe 100644
--- a/app/pages/system/networking/IpPoolPage.tsx
+++ b/app/pages/system/networking/IpPoolPage.tsx
@@ -36,16 +36,12 @@ import { LinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { CreateButton, CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import {
-  TableControls,
-  TableControlsButton,
-  TableControlsLink,
-  TableControlsText,
-} from '~/ui/lib/Table'
+import { TableControls, TableControlsText } from '~/ui/lib/Table'
 import { Tabs } from '~/ui/lib/Tabs'
 import { links } from '~/util/links'
 import { pb } from '~/util/path-builder'
@@ -196,7 +192,7 @@ function IpRangesTable() {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-2">
-        <TableControlsLink to={pb.ipPoolRangeAdd({ pool })}>Add range</TableControlsLink>
+        <CreateLink to={pb.ipPoolRangeAdd({ pool })}>Add range</CreateLink>
       </div>
       <Table columns={columns} emptyState={emptyState} />
     </>
@@ -288,9 +284,7 @@ function LinkedSilosTable() {
           learn more about{' '}
           <ExternalLink href={links.ipPoolsDocs}>managing IP pools</ExternalLink>.
         </TableControlsText>
-        <TableControlsButton onClick={() => setShowLinkModal(true)}>
-          Link silo
-        </TableControlsButton>
+        <CreateButton onClick={() => setShowLinkModal(true)}>Link silo</CreateButton>
       </TableControls>
       <Table columns={columns} emptyState={emptyState} />
       {showLinkModal && <LinkSiloModal onDismiss={() => setShowLinkModal(false)} />}
diff --git a/app/pages/system/networking/IpPoolsPage.tsx b/app/pages/system/networking/IpPoolsPage.tsx
index 054feddf0..b7ae147de 100644
--- a/app/pages/system/networking/IpPoolsPage.tsx
+++ b/app/pages/system/networking/IpPoolsPage.tsx
@@ -27,9 +27,10 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsLink } from '~/ui/lib/Table'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -126,7 +127,7 @@ export function IpPoolsPage() {
         <PageTitle icon={<Networking24Icon />}>IP Pools</PageTitle>
       </PageHeader>
       <TableActions>
-        <TableControlsLink to={pb.ipPoolsNew()}>New IP Pool</TableControlsLink>
+        <CreateLink to={pb.ipPoolsNew()}>New IP Pool</CreateLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/pages/system/silos/SiloIdpsTab.tsx b/app/pages/system/silos/SiloIdpsTab.tsx
index dd653889d..2c6d90847 100644
--- a/app/pages/system/silos/SiloIdpsTab.tsx
+++ b/app/pages/system/silos/SiloIdpsTab.tsx
@@ -17,8 +17,8 @@ import { LinkCell } from '~/table/cells/LinkCell'
 import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
-import { TableControlsLink } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -56,7 +56,7 @@ export function SiloIdpsTab() {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-2">
-        <TableControlsLink to={pb.siloIdpsNew({ silo })}>New provider</TableControlsLink>
+        <CreateLink to={pb.siloIdpsNew({ silo })}>New provider</CreateLink>
       </div>
       <Table emptyState={<EmptyState />} columns={staticCols} />
       <Outlet />
diff --git a/app/pages/system/silos/SiloIpPoolsTab.tsx b/app/pages/system/silos/SiloIpPoolsTab.tsx
index 025368ae0..99f082b0f 100644
--- a/app/pages/system/silos/SiloIpPoolsTab.tsx
+++ b/app/pages/system/silos/SiloIpPoolsTab.tsx
@@ -23,10 +23,11 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
+import { CreateButton } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
-import { TableControls, TableControlsButton, TableControlsText } from '~/ui/lib/Table'
+import { TableControls, TableControlsText } from '~/ui/lib/Table'
 import { links } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
@@ -169,9 +170,7 @@ export function SiloIpPoolsTab() {
           when users ask for one without specifying a pool. Read the docs to learn more
           about <ExternalLink href={links.ipPoolsDocs}>managing IP pools</ExternalLink>.
         </TableControlsText>
-        <TableControlsButton onClick={() => setShowLinkModal(true)}>
-          Link pool
-        </TableControlsButton>
+        <CreateButton onClick={() => setShowLinkModal(true)}>Link pool</CreateButton>
       </TableControls>
       <Table columns={columns} emptyState={<EmptyState />} />
       {showLinkModal && <LinkPoolModal onDismiss={() => setShowLinkModal(false)} />}
diff --git a/app/pages/system/silos/SilosPage.tsx b/app/pages/system/silos/SilosPage.tsx
index 4e50dd24e..598620220 100644
--- a/app/pages/system/silos/SilosPage.tsx
+++ b/app/pages/system/silos/SilosPage.tsx
@@ -26,9 +26,10 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
+import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableControlsLink } from '~/ui/lib/Table'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -113,7 +114,7 @@ export function SilosPage() {
         <PageTitle icon={<Cloud24Icon />}>Silos</PageTitle>
       </PageHeader>
       <TableActions>
-        <TableControlsLink to={pb.silosNew()}>New silo</TableControlsLink>
+        <CreateLink to={pb.silosNew()}>New silo</CreateLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
diff --git a/app/ui/lib/CreateButton.tsx b/app/ui/lib/CreateButton.tsx
new file mode 100644
index 000000000..94876422f
--- /dev/null
+++ b/app/ui/lib/CreateButton.tsx
@@ -0,0 +1,29 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { Link, type LinkProps } from 'react-router-dom'
+
+import { AddRoundel12Icon } from '@oxide/design-system/icons/react'
+
+import { Button, buttonStyle, type ButtonProps } from '~/ui/lib/Button'
+
+export const CreateButton = ({ children, ...props }: ButtonProps) => (
+  <Button size="sm" className="shrink-0" {...props}>
+    <AddRoundel12Icon className="mr-2" />
+    {children}
+  </Button>
+)
+export const CreateLink = (props: LinkProps) => {
+  const { children, ...rest } = props
+  return (
+    <Link className={buttonStyle({ size: 'sm' })} {...rest}>
+      <AddRoundel12Icon className="mr-2" />
+      {children}
+    </Link>
+  )
+}
diff --git a/app/ui/lib/Table.tsx b/app/ui/lib/Table.tsx
index 755b72692..92c7ee114 100644
--- a/app/ui/lib/Table.tsx
+++ b/app/ui/lib/Table.tsx
@@ -7,13 +7,9 @@
  */
 import cn from 'classnames'
 import React, { useRef, type ReactElement } from 'react'
-import { Link, type LinkProps } from 'react-router-dom'
 import SimpleBar from 'simplebar-react'
 
-import { AddRoundel12Icon } from '@oxide/design-system/icons/react'
-
 import { useIsOverflow } from '~/hooks'
-import { Button, buttonStyle, type ButtonProps } from '~/ui/lib/Button'
 import { classed } from '~/util/classed'
 
 export type TableProps = JSX.IntrinsicElements['table']
@@ -133,21 +129,4 @@ export const TableEmptyBox = classed.div`flex h-full max-h-[480px] items-center
  */
 export const TableControls = classed.div`mb-4 flex items-end justify-between space-x-8`
 export const TableControlsText = classed.p`max-w-2xl text-sans-md text-secondary`
-
-export const TableControlsButton = ({ children, ...props }: ButtonProps) => (
-  <Button size="sm" className="shrink-0" {...props}>
-    <AddRoundel12Icon className="mr-2" />
-    {children}
-  </Button>
-)
-export const TableControlsLink = (props: LinkProps) => {
-  const { children, ...rest } = props
-  return (
-    <Link className={buttonStyle({ size: 'sm' })} {...rest}>
-      <AddRoundel12Icon className="mr-2" />
-      {children}
-    </Link>
-  )
-}
-
 export const TableTitle = classed.div`text-sans-lg text-default`

From 315e95873675242e1776c852434f9212c3d85055 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 19 Apr 2024 10:17:55 -0500
Subject: [PATCH 3/4] text-accent-secondary on icon

---
 app/ui/lib/CreateButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/ui/lib/CreateButton.tsx b/app/ui/lib/CreateButton.tsx
index 94876422f..9b2971161 100644
--- a/app/ui/lib/CreateButton.tsx
+++ b/app/ui/lib/CreateButton.tsx
@@ -14,7 +14,7 @@ import { Button, buttonStyle, type ButtonProps } from '~/ui/lib/Button'
 
 export const CreateButton = ({ children, ...props }: ButtonProps) => (
   <Button size="sm" className="shrink-0" {...props}>
-    <AddRoundel12Icon className="mr-2" />
+    <AddRoundel12Icon className="mr-2 text-accent-secondary" />
     {children}
   </Button>
 )
@@ -22,7 +22,7 @@ export const CreateLink = (props: LinkProps) => {
   const { children, ...rest } = props
   return (
     <Link className={buttonStyle({ size: 'sm' })} {...rest}>
-      <AddRoundel12Icon className="mr-2" />
+      <AddRoundel12Icon className="mr-2 text-accent-secondary" />
       {children}
     </Link>
   )

From 6fb2f2f3d61b44788dca582b660d0e8b5dd0e6e8 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 19 Apr 2024 10:20:03 -0500
Subject: [PATCH 4/4] must save 2 lines

---
 app/ui/lib/CreateButton.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/ui/lib/CreateButton.tsx b/app/ui/lib/CreateButton.tsx
index 9b2971161..9d479aa79 100644
--- a/app/ui/lib/CreateButton.tsx
+++ b/app/ui/lib/CreateButton.tsx
@@ -18,12 +18,10 @@ export const CreateButton = ({ children, ...props }: ButtonProps) => (
     {children}
   </Button>
 )
-export const CreateLink = (props: LinkProps) => {
-  const { children, ...rest } = props
-  return (
-    <Link className={buttonStyle({ size: 'sm' })} {...rest}>
-      <AddRoundel12Icon className="mr-2 text-accent-secondary" />
-      {children}
-    </Link>
-  )
-}
+
+export const CreateLink = ({ children, ...rest }: LinkProps) => (
+  <Link className={buttonStyle({ size: 'sm' })} {...rest}>
+    <AddRoundel12Icon className="mr-2 text-accent-secondary" />
+    {children}
+  </Link>
+)