Add custom button beside logo in Sanity Studio header

You can add a custom button to the Sanity Studio navbar by customizing the navbar component in your Studio configuration. Here's how to do it:

Adding a "Return to Website" Button

In your sanity.config.ts (or .js) file, you can override the navbar component using the studio.components configuration:

// sanity.config.ts
import {defineConfig, NavbarProps} from 'sanity'
import {Button} from '@sanity/ui'

function CustomNavbar(props: NavbarProps) {
  return (
    <>
      {props.renderDefault(props)} {/* Render the default navbar with logo */}
      
      <Button
        as="a"
        href="/"
        target="_parent"
        text="Return to Website"
        tone="primary"
        mode="ghost"
      />
    </>
  )
}

export default defineConfig({
  // ... rest of your config
  studio: {
    components: {
      navbar: CustomNavbar,
    }
  }
})

Key Points

The props.renderDefault(props) function renders the default navbar (including the Sanity logo), and you can add your custom button alongside it. Since your Studio is in an iframe, use target="_parent" to make the link navigate the parent window rather than just the iframe.

You can customize the button further using Sanity UI components:

• Change tone to "default", "primary", "positive", etc.
• Change mode to "bleed", "ghost", or "default"
• Add an icon with the icon prop
• Adjust spacing with padding and margin props

The navbar component customization is part of the Studio Components API, which lets you override various parts of the Studio UI while keeping the default functionality intact.