ToolBarWrapper

The fixed bottom bar that hosts a toolbar: full width, safe-area padded, and lifted by the --kb-inset CSS variable when the on-screen keyboard is up.

<script setup lang="ts">
import RyderToolBarWrapper from "@opeolluwa/ryder/components/notes/ToolBarWrapper.vue"
</script>

<template>
  <RyderToolBarWrapper>
    <button type="button">One</button>
    <button type="button">Two</button>
  </RyderToolBarWrapper>
</template>

Examples

Normally only used inside EditorToolBar, which wraps its buttons in it — the standalone demo below pins the bar inside the box:

<script setup lang="ts">
import UIcon from "@nuxt/ui/components/Icon.vue";
import ToolBarWrapper from "../../../src/components/notes/ToolBarWrapper.vue";

const actions = [
  { label: "Undo", icon: "ri:arrow-go-back-line" },
  { label: "Bold", icon: "ri:bold" },
  { label: "Link", icon: "ri:link" },
  { label: "Emoji", icon: "ri:emotion-happy-line" },
];
</script>

<template>
  <div
    class="relative h-44 overflow-hidden rounded-xl border border-gray-200 bg-gray-50 [transform:translateZ(0)] dark:border-white/10 dark:bg-white/5"
  >
    <p class="p-3 text-xs text-gray-500 dark:text-white/50">
      A fixed bottom bar. Inside this box it is pinned to the box rather than
      the viewport.
    </p>

    <ToolBarWrapper>
      <button
        v-for="action in actions"
        :key="action.label"
        type="button"
        :title="action.label"
        :aria-label="action.label"
        class="flex size-9 items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
      >
        <UIcon :name="action.icon" class="size-5" />
      </button>
    </ToolBarWrapper>
  </div>
</template>

Props

None.

Emits

None.

Slots

Slot	Props	Content
default	—	The bar's contents (buttons, separators, popovers).

Notes

• position: fixed; inset-inline: 0; z-index: 50, h-16, with a top border and white/gray-900 background — a <nav> element.
• bottom: var(--kb-inset, 0px) — set --kb-inset on an ancestor when the keyboard opens to lift the bar above it; it defaults to 0px.
• Bottom padding uses max(0.625rem, env(safe-area-inset-bottom)) so the bar clears the home indicator on notched phones.
• It has no props or emits of its own: everything is the default slot plus those two CSS inputs.
• Because it is fixed, its demo (and the editor's) needs bottom padding so the content underneath is not covered — the playground uses pb-24.