AisAddon

Use AisAddon to add text and icons to an AisInputGroup. The addon component is intended to be rendered in a flex layout. Addons are set to be vertically centered and to not grow horizontally.

An AisAddon can be made clickable. Deciding when to use a clickable addon vs embedding an AisButton in an input group is a judgement call. In general, addons should be used for secondary and tertiary actions that should not attract attention until they are needed. Buttons should be used when it is a primary feature of the input group.

Basic example

Addon

<script setup>
  import { AisAddon } from '@ais-public/ais-components';
  import { AisInputGroup } from '@ais-public/ais-components';
  import { AisInput } from '@ais-public/ais-components';
  import { AisField } from '@ais-public/ais-components';
</script>

<template>
  <AisField label="Basic example">
    <AisInputGroup>
      <AisAddon>Addon</AisAddon>
      <AisInput placeholder="Example..."/>
    </AisInputGroup>
  </AisField>
</template>

Props

icon

The optional icon prop accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons. Specifying a value will cause an icon to be displayed alongside the addon's text.

Icon example

Addon

<script setup>
import { AisAddon } from '@ais-public/ais-components';
import { AisInputGroup } from '@ais-public/ais-components';
import { AisInput } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';
</script>

<template>
  <AisField label="Icon example">
    <AisInputGroup>
      <AisAddon icon="info">Addon</AisAddon>
      <AisInput placeholder="Example..."/>
    </AisInputGroup>
  </AisField>
</template>

button

button is a boolean prop with a default value of false. When set to true, the icon will be rendered as an AisIconButton and the text in the default slot will be clickable. Button presses can be handled by binding to the @click event.

Button Example

<script setup>
import { ref } from 'vue';
import { AisAddon } from '@ais-public/ais-components';
import { AisInputGroup } from '@ais-public/ais-components';
import { AisInput } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';

const input = ref(null)
const text = ref('')

const reset = () => {
  text.value = ''
  input.value.focus()
}
</script>

<template>
  <AisField label="Button Example" label-mode="sr-only">
    <AisInputGroup>
      <AisInput
          ref="input"
          v-model="text"
          placeholder="Enter text then reset..."
      />
      <AisAddon button
                icon="undo"
                label="Reset text"
                @click="reset"
      />
    </AisInputGroup>
  </AisField>
</template>

label

When button is true, developers must include a textual label for the icon button. The label will also be rendered as the icons title attribute and display on hover.

iconRight

The optional iconRight prop accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons. Specifying a value will cause an icon to be displayed to the right of the addon's text. When button is true, the icon will be rendered as an icon button.

Icon right example

Next

<script setup>
import { AisAddon } from '@ais-public/ais-components';
import { AisInputGroup } from '@ais-public/ais-components';
import { AisInput } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';
</script>

<template>
  <AisField label="Icon right example">
    <AisInputGroup>
      <AisInput placeholder="Example..."/>
      <AisAddon button iconRight="arrow">Next</AisAddon>
    </AisInputGroup>
  </AisField>
</template>

variant

The variant prop accepts the standard variants and dictates the addon's styles. The variants are: primary, secondary, default, plain, info, success, warning, and danger. The default variant is default and the other variants should be used carefully as addons should not typically be competing for attention with other parts of the page.

Variant example

Example

defaultprimarysecondaryplaininfosuccesswarningdanger

<script setup>
import { ref } from 'vue';
import { variants } from '@/util/variants-util';
import { AisAddon } from '@ais-public/ais-components';
import { AisInputGroup } from '@ais-public/ais-components';
import { AisSelect } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';

const selectedVariant = ref('default');
</script>

<template>
  <AisField label="Variant example">
    <AisInputGroup>
      <AisAddon :variant="selectedVariant" :icon="selectedVariant">
        Example
      </AisAddon>
      <AisSelect v-model="selectedVariant" :options="variants" class="w-72"  />
    </AisInputGroup>
  </AisField>
</template>

Events

@click

Bind to @click to handle the addon's click event. See the button example for details.

Slots

default

The default slot is intended for setting the addon's text and spacing it correctly with an icon. The contents of the default slot are rendered in a flex layout with a small gap. See the first two examples to see the default slot in action.

custom

The custom slot is available if you want to take over the rendering of the addon. It is not expected to be needed often. The custom slot exposes the slot variables icon, button, label, and hasIcon.