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