Skip to content

<AdminButton />

The Admin button with a shield icon in an app header, next to the organization switcher and the user's avatar

<AdminButton /> links to the admin dashboard and renders nothing for anyone who isn’t an app admin. The default layout doesn’t link to /admin, so add it to your navigation if admins should find the dashboard without typing the URL.

Quick start

src/routes/+layout.svelte
src/components/AppHeader.tsx

What it does

  • Renders a link labelled Admin with a shield icon, pointing at ADMIN_ROUTE from admin.constants.ts (/admin).
  • Renders nothing while AUTH_CONSTANTS.admin is off, for signed-out visitors, for users who aren’t app admins, and while the admin check loads.

Props

  • class: replaces the default classes btn preset-tonal gap-2.
  • className: replaces the default classes btn preset-tonal gap-2.

Behavior

Hiding the link is only the UI. Every admin Convex function checks the caller’s role on the server, and the /admin page shows Access denied to anyone else.

To build your own entry point, use the hook the button uses, useIsAppAdmin(). It asks admin.queries.isCurrentUserAdmin and is false until the answer arrives. In SvelteKit it returns an object, so read admin.isAppAdmin instead of destructuring it.In Next.js it returns the boolean.

src/lib/components/SettingsNav.svelte
src/components/SettingsNav.tsx