Button group

This component groups multiple buttons together. It modifies the border radius of the buttons and removes any gaps between them.

Slots

default
The buttons within the group.

Examples

Icons

Preview

Code

<template>
    <FluxButtonGroup>
        <FluxSecondaryButton icon-leading="list"/>
        <FluxSecondaryButton icon-leading="grid-2"/>
        <FluxPrimaryButton icon-leading="rectangle-history"/>
    </FluxButtonGroup>
</template>

<script
    lang="ts"
    setup>
    import { FluxButtonGroup, FluxPrimaryButton, FluxSecondaryButton } from '@flux-ui/flux';
</script>

Labels

Preview

Code

<template>
    <FluxButtonGroup>
        <FluxSecondaryButton label="Personal"/>
        <FluxPrimaryButton label="Address"/>
        <FluxSecondaryButton label="Shipping"/>
    </FluxButtonGroup>
</template>

<script
    lang="ts"
    setup>
    import { FluxButtonGroup, FluxPrimaryButton, FluxSecondaryButton } from '@flux-ui/flux';
</script>