diff --git a/packages/editor/src/components/toolbar/Toolbar.tsx b/packages/editor/src/components/toolbar/Toolbar.tsx
index 4ecf87012e..798b785122 100644
--- a/packages/editor/src/components/toolbar/Toolbar.tsx
+++ b/packages/editor/src/components/toolbar/Toolbar.tsx
@@ -34,6 +34,7 @@ import { GLTFModifiedState } from '@etherealengine/engine/src/gltf/GLTFDocumentS
import { getMutableState, getState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
import { ContextMenu } from '@etherealengine/ui/src/components/tailwind/ContextMenu'
+import { SidebarButton } from '@etherealengine/ui/src/components/tailwind/SidebarButton'
import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
import { t } from 'i18next'
import React from 'react'
@@ -201,10 +202,9 @@ export default function Toolbar() {
{toolbarMenu.map(({ name, action, hotkey }, index) => (
-
+
))}
diff --git a/packages/ui/src/components/tailwind/SidebarButton/index.tsx b/packages/ui/src/components/tailwind/SidebarButton/index.tsx
new file mode 100644
index 0000000000..22cddb0dc1
--- /dev/null
+++ b/packages/ui/src/components/tailwind/SidebarButton/index.tsx
@@ -0,0 +1,36 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and
+provide for limited attribution for the Original Developer. In addition,
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023
+Ethereal Engine. All Rights Reserved.
+*/
+
+import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export function SidebarButton({ children, className, ...rest }) {
+ return (
+
+ )
+}
diff --git a/packages/ui/src/primitives/tailwind/Button/index.tsx b/packages/ui/src/primitives/tailwind/Button/index.tsx
index 31641e2262..7b407e1322 100644
--- a/packages/ui/src/primitives/tailwind/Button/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Button/index.tsx
@@ -32,7 +32,7 @@ export interface ButtonProps extends React.HTMLAttributes {
endIcon?: ReactNode
children?: ReactNode
size?: 'small' | 'medium' | 'large'
- variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'success' | 'transparent' | 'sidebar'
+ variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'success' | 'transparent'
disabled?: boolean
fullWidth?: boolean
rounded?: 'partial' | 'full' | 'none'
@@ -59,8 +59,7 @@ const variants = {
outline: 'border border-solid border-theme-primary bg-theme-surface-main dark:bg-theme-highlight text-theme-primary',
danger: 'bg-red-500',
success: 'bg-teal-700',
- transparent: 'bg-transparent dark:bg-transparent',
- sidebar: 'bg-[#141619]'
+ transparent: 'bg-transparent dark:bg-transparent'
}
const Button = React.forwardRef(