AisIconButton

AisIconButton provides a clickable icon. It does this by wrapping AisIcon in a BaseButton. AisIconButton is useful for building toolbars and inline controls. Use the press and hover options to add details to the user experience.

Props

Icon

The icon prop accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons.

<script setup>
  import { AisIconButton } from '@ais-public/ais-components'
</script>

<template>
  <div class="flex gap-6 bg-ui-gray-50 p-4">
    <AisIconButton icon="edit" label="Edit example" size="2xl" />
    <AisIconButton icon="close" label="Info example" size="2xl" />
    <AisIconButton icon="delete" label="Delete example" size="2xl" />
  </div>
</template>

Label

The label prop provides a textual label for the button and is required for accessibility. It is rendered as the body of the button and is visible only to screen readers.

Size

size adjusts the size of the icon. Valid values are sm, md, lg, xl, 2xl, 3xl, and 4xl. md is the default value.

Size

smmdlgxl2xl3xl4xl

<script setup>
  import { AisIconButton } from '@ais-public/ais-components'
  import { AisField } from '@ais-public/ais-components'
  import { AisSelect } from '@ais-public/ais-components'
  import { ref } from 'vue'

  const sizes = ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl']
  const selectedSize = ref('md')
</script>

<template>
  <div class="grid gap-4 ">
    <AisField label="Size" size="sm">
      <AisSelect v-model="selectedSize" :options="sizes" />
    </AisField>

    <div class="flex gap-2 bg-ui-gray-50 p-4">
      <AisIconButton icon="edit" label="Edit example" :size="selectedSize" />
      <AisIconButton icon="close" label="Info example" :size="selectedSize" />
      <AisIconButton icon="delete" label="Delete example" :size="selectedSize" />
    </div>
  </div>
</template>

Disabled

Use the boolean disabled prop to disable an AisIconButton. You can use disabled by itself or :disabled="true".

<script setup>
  import { AisIconButton } from '@ais-public/ais-components'
</script>

<template>
  <div class="flex gap-6 bg-ui-gray-50 p-4">
    <AisIconButton disabled icon="edit" label="Edit example" size="2xl" />
    <AisIconButton disabled icon="close" label="Info example" size="2xl" />
    <AisIconButton disabled icon="delete" label="Delete example" size="2xl" />
  </div>
</template>

Disabled Styles

Use the disabledStyles prop to customize the appearance of the disabled button. The property expects an array of Tailwind classes.

<script setup>
  import { AisIconButton } from '@ais-public/ais-components'
</script>

<template>
  <div class="flex gap-6 bg-ui-gray-50 p-4">
    <AisIconButton disabled :disabledStyles="['opacity-30', 'cursor-not-allowed']" tooltip icon="edit" label="Edit example" size="2xl" />
    <AisIconButton disabled :disabledStyles="['opacity-40', 'cursor-not-allowed']" tooltip icon="close" label="Info example" size="2xl" />
    <AisIconButton disabled :disabledStyles="['opacity-50', 'cursor-not-allowed']" tooltip icon="delete" label="Delete example" size="2xl" />
  </div>
</template>

Press

press is a boolean prop that enables a button-press animation when the user clicks the button. press will have no effect if the button is busy.

<script setup>
import { AisIconButton } from '@ais-public/ais-components'
</script>

<template>
  <div class="flex gap-6 bg-ui-gray-50 p-4">
    <AisIconButton press icon="edit" label="Edit example" size="2xl" />
    <AisIconButton press icon="close" label="Info example" size="2xl" />
    <AisIconButton press icon="delete" label="Delete example" size="2xl" />
  </div>
</template>

Tooltip

Setting tooltip to true will render the icon button's label as a tooltip. When tooltip is false, the button's label will be set as the title attribute. The default value is false. You may set the tooltip variant by passing tooltip the variant as string. Additionally, developers can specify all tooltip options by passing tooltip an options object. See the examples below for details.

<script setup>
import { AisIconButton } from '@ais-public/ais-components'
import {ref, computed} from 'vue'
const count = ref(1)
const dynamicLabel = computed(() => `Count: ${count.value}`)
</script>

<template>
  <div class="flex gap-6 bg-ui-gray-50 p-4">
    <AisIconButton
      icon="edit"
      label="Edit example"
      size="2xl"
      tooltip
    />

    <AisIconButton
      icon="close"
      label="Info example"
      size="2xl"
      tooltip="primary"
    />

    <AisIconButton
      icon="new"
      size="2xl"
      :label="dynamicLabel"
      @click="count++" keep-focus
      :tooltip="{variant: 'primary', placement: 'right'}"
    />
  </div>
</template>

Busy

Use the busy prop to indicate that the icon button is busy. When the component is busy, it will not accept additional clicks. This is commonly used when @click triggers an asynchronous action and must await a response.

Click to activate the busy state.

<script setup>
  import { AisIconButton } from '@ais-public/ais-components'
  import Example from '@/components/docs/ComponentExample.vue'
  import { ref } from 'vue'
  const busy = ref(false)

  const handleClick = () => {
    console.log('AisIconButton Clicked!')
    busy.value = true
    setTimeout(() => busy.value = false, 3000)
  }
</script>

<template>
  <div class="flex items-end justify-around">
    <Example label="Click to activate the busy state.">
      <AisIconButton
          icon="save" press
          :busy="busy"
          label="Save example"
          size="2xl"
          @click="handleClick"
      />
    </Example>
  </div>
</template>

Shadow

shadow adds a Tailwind drop shadow to the icon. Valid values are sm, md, lg, xl, 2xl, and none, which is the default value.

<script setup>
import { AisIconButton } from '@ais-public/ais-components'
</script>

<template>
  <div class="flex gap-4 p-4 items-center bg-ui-gray-50">
    <AisIconButton shadow="sm" icon="close" label="Info example" size="2xl" />
    <AisIconButton shadow="md" icon="close" label="Info example" size="2xl" />
    <AisIconButton shadow="lg" icon="close" label="Info example" size="2xl" />
    <AisIconButton shadow="xl" icon="close" label="Info example" size="2xl" />
    <AisIconButton shadow="2xl" icon="close" label="Info example" size="2xl" />
    <AisIconButton shadow="3xl" icon="close" label="Info example" size="2xl" />
  </div>
</template>

Hover

hover is a boolean prop that cuts the button's opacity. On hover, the opacity will raise to 100%. Icon buttons are commonly used in toolbars and line items where it is useful to take the emphasis off of those elements until the user needs them. press will have no effect if the button is busy.

<script setup>
import { AisIconButton } from '@ais-public/ais-components'
</script>

<template>
  <div class="flex gap-2 p-4">
    <AisIconButton hover press icon="edit" label="Edit example" size="2xl" />
    <AisIconButton hover press icon="close" label="Info example" size="2xl" />
    <AisIconButton hover press icon="delete" label="Delete example" size="2xl" />
  </div>
</template>

keepFocus

keepFocus is a boolean prop. When it is true, the icon button will keep focus after a click instead of calling blur(). When true, the button will have a focus ring after a click. This allows keyboard users to click multiple times. See the @click example to see it in action.

Slots

default slot

AisIconButton's default slot (i.e. tag body) allows developers to add descriptive text to an icon button. This is a good way to create unobtrusive controls in spots that might not easily accommodate an AisButton such as at the end of a line of text or in a table cell.

<script setup>
  import { AisIconButton } from '@ais-public/ais-components'
</script>

<template>
  <div>
    <AisIconButton
      icon="heart"
      label="Click to favorite"
      class="active:italic items-center gap-0 p-2"
      hover press
      :tooltip="{placement: 'right'}"
    >
      Favorite
    </AisIconButton>
  </div>
</template>

The button definition includes TailwindCSS's group modifier. This allows developers to do some fun things like exposing text on hover as shown in the next example.

<script setup>
  import { AisIconButton } from '@ais-public/ais-components'
</script>

<template>
  <div>
    <AisIconButton
      icon="new" hover
      class="active:underline hover:italic p-1"
      label="Help text"
    >
      <span class="hidden group-hover:inline group-focus:inline">
        Add new example
      </span>
    </AisIconButton>
  </div>
</template>

Events

@click

Bind to @click to handle the button's click event.

0

<script setup>
import { ref } from 'vue'
import { AisIconButton } from '@ais-public/ais-components'
const counter = ref(0)
</script>

<template>
  <div class="flex gap-2">
    <AisIconButton
      hover press keep-focus
      icon="left"
      label="Decrement counter"
      @click="counter--"
      size="3xl"
    />
    <div class="text-3xl">
      {{counter}}
    </div>
    <AisIconButton
      hover press keep-focus
      icon="right"
      label="Increment counter"
      @click="counter++"
      size="3xl"
    />
  </div>
</template>

Styling

Use all the standard Tailwind CSS classes to style icon buttons. Text colors (e.g. text-success) is a good place to start.

<script setup>
import { AisIconButton } from '@ais-public/ais-components'
</script>

<template>
  <div class="flex gap-2 p-4">
    <AisIconButton class="text-info" hover press icon="edit" label="Edit example" size="2xl"/>
    <AisIconButton class="text-info" hover press icon="close" label="Info example" size="2xl"/>
    <AisIconButton class="text-info" hover press icon="delete" label="Delete example" size="2xl"/>
  </div>
</template>