Components

Button Group

Connect, toggle, and float groups of buttons.

Group buttons with UiButtonGroup, build segmented toggles with UiButtonToggleGroup, or pin floating actions with UiButtonFabGroup.

Connect buttons

<template>
  <UiButtonGroup connected>
    <UiButton variant="outline" text="Day" />
    <UiButton variant="outline" text="Week" />
    <UiButton variant="outline" text="Month" />
  </UiButtonGroup>
</template>

Add joined for a seamless (gap-less) group, or vertical to stack.

Build a toggle group

<script setup lang="ts">
import type { IButtonToggleOption } from '@colorffy/ui'
import { ref } from 'vue'

const current = ref('list')
const options: IButtonToggleOption[] = [
  { id: 'list', title: 'List', icon: '&#xe896;', active: true },
  { id: 'grid', title: 'Grid', icon: '&#xe9b0;' },
]
</script>

<template>
  <UiButtonToggleGroup
    :options="options"
    aria-label="View mode"
    @on-option-click="(event, item) => current = item.id"
  />
</template>

Pin floating actions

<template>
  <UiButtonFabGroup>
    <UiButton variant="filled" color="primary" icon>
      <template #icon><UiIconMaterial icon-code="&#xe145;" /></template>
    </UiButton>
  </UiButtonFabGroup>
</template>

UiButtonGroup props

Prop	Type	Default	Description
`connected`	`boolean`	`false`	Reduced gap; only the first/last corners are rounded.
`joined`	`boolean`	`false`	Seamless, gap-less group (requires `connected`).
`vertical`	`boolean`	`false`	Stack buttons vertically.
`customClass`	`string \| null`	—	Extra classes.

UiButtonToggleGroup props

Prop	Type	Default	Description
`options`	`IButtonToggleOption[]`	—	Options: `{ id, title, icon?, text?, badge?, active?, disabled? }`.
`ariaLabel`	`string`	—	Accessible group label.
`groupLabel`	`string`	—	Visible group label.

Emits: onOptionClick(event, item).

UiButtonFabGroup props

Prop	Type	Default	Description
`top`	`boolean`	`false`	Anchor to the top instead of the bottom.
`start`	`boolean`	`false`	Anchor to the start (left) instead of the end.
`customClass`	`string \| string[] \| Record<string, boolean> \| null`	—	Extra classes.

Edit this pageorReport an issue

Button

Trigger actions with UiButton — variants, colors, sizes, and groups.

Button Menu

Dropdown menus with items, submenus, dividers, and labels.