AisButtonGroup

AisButtonGroup is an AisButton container that will present its children as a single contiguous group. Button groups are typically not the primary focus on a page and should be styled accordingly. The default variant and alternate variants are good starting points. It is best not to mix and match variants. If you want to capture a selection in a button group, see AisRadioGroup's buttons option. Let us know if you would like similar functionality in AisCheckboxGroup.

Variant

defaultprimarysecondaryplaininfosuccesswarningdanger

Size

xssmmdlgxl

Rounded

truefalsenonesmmdlgxl2xl3xlfull

outline

Hover

Fast

Press

Vertical

<template>
  <div class="grid gap-8">
    <div class="flex gap-4 justify-center p-4 pb-8 border-b">
      <AisButtonGroup
        :variant="variant"
        :size="size"
        :rounded="rounded"
        :outline="outline"
        :press="press"
        :hover="hover"
        :fast="fast"
        :vertical="vertical"

      >
        <AisButton :icon="faScissors">Cut</AisButton>
        <AisButton icon="copy">Copy</AisButton>
        <AisButton :icon="faPaste">Paste</AisButton>
      </AisButtonGroup>
    </div>

    <div class="grid md:grid-cols-3 gap-x-4 gap-y-4  md:gap-y-8">
      <AisField label="Variant">
        <AisSelect v-model="variant" :options="variants" />
      </AisField>

      <AisField label="Size">
        <AisSelect v-model="size" :options="controlSizes" />
      </AisField>

      <AisField label="Rounded">
        <AisSelect v-model="rounded" :options="roundedStates" />
      </AisField>

      <div class="md:col-span-3 flex flex-wrap gap-8 justify-evenly lg:justify-center">
        <AisToggle label="outline" v-model="outline" />
        <AisToggle label="Hover" v-model="hover" />
        <AisToggle label="Fast" v-model="fast" />
        <AisToggle label="Press" v-model="press" />
        <AisToggle label="Vertical" v-model="vertical" />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { variants } from '@/util/variants-util';
  import { controlSizes } from '@/util/controls';
  import { roundedStates } from '@/util/rounded-prop';

  import { AisButtonGroup } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';
  import { AisField } from '@ais-public/ais-components';
  import { AisSelect } from '@ais-public/ais-components';
  import { AisToggle } from '@ais-public/ais-components';

  import { faScissors } from '@fortawesome/free-solid-svg-icons/faScissors';
  import { faPaste } from '@fortawesome/free-regular-svg-icons/faPaste';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faScissors, faPaste);

  const variant = ref('default');
  const size = ref('md');
  const rounded = ref(true);

  const outline = ref(false);
  const hover = ref(false);
  const fast = ref(false);
  const press = ref(true);
  const vertical = ref(false);
</script>

Props

variant

The variant prop accepts the standard variants and dictates the button styles. The variants are: primary, secondary, default, info, success, warning, and danger. The default value is default.

alternate

The boolean prop alternate can be combined with variant to provide an alternate set of button styles. Alternate variants use a lighter background with a visible border.

size

Thesize prop controls the button size. The accepted values are: xs, sm, md, lg, and xl. The default value is md. Button groups should typically use md or sm.

rounded

The rounded prop controls the border radius of the group. The accepted values are: true, false, md, lg, and full. The default value is rounded.

vertical

The vertical prop activates vertical mode for the group. When active, buttons in the group will stack on top of each other instead of spreading out horizontally.

Effects

AisButton accepts a number of boolean props that will enable interactive effects on the button group.

press

press provides a click animation. This prop defaults to true for button groups.

hover

hover matches the UIDS hover animation. This effect is not active by default.

fast

hover fast provides a faster version of the UIDS animation. In application interfaces the fast version of the effect is preferred.