Float Button

#Basic usage

float-button/basic Vue React

Nothing chosen yet.

float-button/basic.vue

<script setup lang="ts">
import { pen_line, plus, trash_2 } from "@bysages/icons";
import { FloatButton, Icon } from "@bysages/vue";
import { ref } from "vue";

const status = ref("Nothing chosen yet.");
</script>

<template>
  <div>
    <FloatButton>
      <FloatButton.Trigger label="Actions">
        <Icon :glyph="plus" />
      </FloatButton.Trigger>
      <FloatButton.Item label="Compose" @click="status = 'Compose'">
        <Icon :glyph="pen_line" />
      </FloatButton.Item>
      <FloatButton.Item label="Delete" @click="status = 'Delete'">
        <Icon :glyph="trash_2" />
      </FloatButton.Item>
    </FloatButton>
    <p role="status" class="mt-4 text-sm text-tertiary">
      {{ status }}
    </p>
  </div>
</template>

float-button/controlled-open Vue React

Nothing chosen yet.

float-button/controlled-open.vue

<script setup lang="ts">
import { pen_line, plus } from "@bysages/icons";
import { Button, FloatButton, Icon } from "@bysages/vue";
import { ref } from "vue";

const open = ref(false);
const status = ref("Nothing chosen yet.");

const compose = () => {
  status.value = "Compose";
  open.value = false;
};
</script>

<template>
  <div>
    <Button variant="outline" @click="open = !open">
      {{ open ? "Fold the group" : "Unfold the group" }}
    </Button>
    <p role="status" class="my-4 text-sm text-tertiary">
      {{ status }}
    </p>
    <FloatButton v-model:open="open" placement="bottom-start">
      <FloatButton.Trigger label="Actions">
        <Icon :glyph="plus" />
      </FloatButton.Trigger>
      <FloatButton.Item label="Compose" @click="compose">
        <Icon :glyph="pen_line" />
      </FloatButton.Item>
    </FloatButton>
  </div>
</template>

#Props

#FloatButtonRoot

A floating action and its fanned-out alternatives — FAB and speed dial in one family. The Root moors the group at a page corner and holds the openness (mirrored from open when controlled); the Trigger flips it; each Item is a round action with its name surfacing beside it while the group is open. The buttons are the shared recipe (vessels here: round); this family owns only the mooring, the fan and the fold.

Prop	Type	Default	Description
`open`	`Boolean`	`undefined`	Controlled openness: leave unset to let the group hold its own state; while set, the Trigger reports back through `update:open`.
`placement`	`String as PropType<FloatButtonPlacement>`	`"bottom-end"`	Which corner the group moors at.
`size`	`String as PropType<FloatButtonSize>`	`"lg"`	One rung of the button ladder for the whole group.

#FloatButtonTrigger

Prop	Type	Default	Description
`label`	`String`	`undefined`	The accessible name; the control is icon-only.

#FloatButtonItem

Prop	Type	Default	Description
`label`	`String`		The action's name: the button's accessible name and the annotation surfaced beside it while the group is open.
`disabled`	`Boolean`	`false`	—