Vitral 0.2
Button

ButtonGroup

Buttons that belong together, joined into one named control, each keeping its own tab stop.

WAI-ARIA tested

Import

main.ts
import { ButtonGroup } from '@vitral/vue';

Basic

<script setup lang="ts">import { Button, ButtonGroup } from '@vitral/vue';</script> <template>    <ButtonGroup aria-label="Record">        <Button label="Save" icon="check" />        <Button label="Delete" icon="trash" />        <Button label="Cancel" icon="close" />    </ButtonGroup></template>

Outlined and secondary

<script setup lang="ts">import { Button, ButtonGroup } from '@vitral/vue';</script> <template>    <ButtonGroup aria-label="Pages">        <Button icon="chevronLeft" aria-label="Previous" variant="outlined" severity="secondary" />        <Button label="1" variant="outlined" severity="secondary" />        <Button label="2" variant="outlined" severity="secondary" />        <Button icon="chevronRight" aria-label="Next" variant="outlined" severity="secondary" />    </ButtonGroup></template>

Vertical

<script setup lang="ts">import { Button, ButtonGroup } from '@vitral/vue';</script> <template>    <ButtonGroup orientation="vertical" aria-label="Zoom">        <Button icon="plus" aria-label="Zoom in" severity="secondary" />        <Button icon="minus" aria-label="Zoom out" severity="secondary" />    </ButtonGroup></template>

API

Read from packages/vue/src/components/ButtonGroup/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
orientation'horizontal' | 'vertical'Side by side (the default) or stacked.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Slots

NameSlot propsDescription
default——