Flux

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

<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/components';
</script>

Labels

<template>
    <FluxButtonGroup>
        <FluxSecondaryButton
            label="Personal"/>

        <FluxPrimaryButton
            label="Address"/>

        <FluxSecondaryButton
            label="Shipping"/>
    </FluxButtonGroup>
</template>

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