ACV Button

Button is used to highlight key actions and clearly inform user of what will happen after the interaction.

Use buttons for actions in forms, dialogs, and much more.

It supports multiple variants, sizes, and states.

Overview

Basic button

Source code

vue

<script setup>
  import AcvButton from '@/components/button/button.vue';
</script>

<template>
  <AcvButton>Button</AcvButton>
</template>

Variants

The AcvButton comes with five variants: primary (default), secondary, ghost, status and inverted.

Source code

vue

<script setup>
  import AcvButton from '@/components/button/button.vue';
</script>

<template>
  <AcvButton variant="primary">
    Primary
  </AcvButton>
  <AcvButton variant="secondary">
    Secondary
  </AcvButton>
  <AcvButton variant="ghost">
    Ghost
  </AcvButton>
  <AcvButton variant="status">
    Danger
  </AcvButton>
  <div
    class="dark"
  >
    <AcvButton variant="inverted">
      Inverted
    </AcvButton>
  </div>
</template>

<style scoped>
.acv-button {
  margin-block: 8px;
  margin-inline: 8px;
}

.dark {
  background-color: var(--acv-color-nav-primary);
  padding-inline: 8px;
  display: inline-flex
}
</style>

Default state

Default state shows that button is clickable and user can perform a task on it

Hovered state

Once button is hovered by mouse cursor, it enters hover state, and it changes its color to a darker shade. This change indicates that user can interact with it.

Focused state

Focused state is when button is selected by keyboard navigation. It is indicated by a blue outline around the button. It is like a hover state, but it is triggered by keyboard navigation.

Disabled state

Disabled state is when button is not interactable with user. Nothing happens when user clicks on it.

Disabled state is represented with a lighter shade of color.

Active, pressed state

Active state is when button is clicked and user is holding the mouse button. It is represented by a darker shade of color and inner shadow.

Selected state

Selected state normally is used for toggle buttons or with set of buttons to indicate selected button within grouping. It is only applied when user has selected the button.

Loading state

Use the loading prop to show a loading spinner inside the button.

Button content will be disabled and visually hidden while loading.

Toggle loading

Source code

vue

<script setup>
  import Button from '@/components/button/button.vue';
  import AcvCheckbox from '@/components/checkbox/checkbox.vue';
  import Row from '@/components/row/row.vue';
  import { ref } from 'vue';

  const isLoading = ref(true);
</script>

<template>
  <AcvCheckbox
    v-model="isLoading"
    class="mb-16"
  >
    Toggle loading
  </AcvCheckbox>
  <Row gutter="24">
    <Button
      :loading="isLoading"
    >
      Default button
    </Button>
    <Button
      :loading="isLoading"
      size="large"
    >
      Large button
    </Button>
  </Row>
</template>

<style scoped>
.acv-button {
  &+& {
    margin-left: 16px;
  }
}

.mb-16 {
  margin-bottom: 16px;
}
</style>

Sizing

Use size=large to specify bigger buttons.

Source code

vue

<script setup>
  import AcvButton from '@/components/button/button.vue';
  </script>

<template>
  <div class="acv-grid-row acv-grid--cols-2">
    <AcvButton>
      Default button
    </AcvButton>
    <AcvButton size="large">
      Large button
    </AcvButton>
    <AcvButton variant="secondary">
      Default button
    </AcvButton>
    <AcvButton
      variant="secondary"
      size="large"
    >
      Large button
    </AcvButton>
  </div>
</template>

<style scoped>
  .acv-grid-row{
    display: grid;
    width: 100%;
    place-items: start;
    grid-gap: 1.5rem;
    gap: 1.5rem;
  }

  .acv-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
</style>

With icons

Use prepend and append slots to add icons to buttons. Also, you can use inline icons in default slot.

Source code

vue

<script setup>
  import Button from '@/components/button/button.vue';
  import { IconFromCloud16 } from '@acronis-platform/icons/from';
  import { IconToCloud16 } from '@acronis-platform/icons/to';
  </script>

<template>
  <div class="acv-grid-row acv-grid--cols-3">
    <Button
      size="large"
    >
      <template #prepend>
        <IconToCloud16 />
      </template>
      Prepend icon
    </Button>
    <Button
      size="large"
    >
      <template #prepend>
        <IconToCloud16 />
      </template>
      Two icons
      <template #append>
        <IconFromCloud16 />
      </template>
    </Button>
    <Button
      size="large"
    >
      Append icon
      <template #append>
        <IconFromCloud16 />
      </template>
    </Button>
    <Button>
      <template #prepend>
        <IconToCloud16 />
      </template>
      Prepend inline icon
    </Button>
    <Button>
      <template #prepend>
        <IconToCloud16 />
      </template>
      Two inline icons
      <template #append>
        <IconFromCloud16 />
      </template>
    </Button>
    <Button>
      Append inline icon
      <template #append>
        <IconFromCloud16 />
      </template>
    </Button>
  </div>
</template>

<style scoped>
.acv-grid-row{
  display: grid;
  width: 100%;
  place-items: start;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.acv-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
</style>

Button types

By default <acv-button> renders a <button> element. You can change the variant of the button by setting the variant prop. Also, you can render a <a> element by setting the href prop. You may generate router-links by setting the to prop.

TIP

Variant prop is only available when the button is rendered as a <button> element. It is ignored when either href or to props are set.

Source code

vue

<script setup>
  import AcvButton from '@/components/button/button.vue';
</script>

<template>
  <AcvButton button-type="button">
    Button
  </AcvButton>
  <AcvButton button-type="submit">
    Submit
  </AcvButton>
  <AcvButton button-type="reset">
    Reset
  </AcvButton>
  <AcvButton
    button-type="link"
    href="#"
  >
    Link
  </AcvButton>
  <AcvButton
    button-type="route"
    to="#"
  >
    Router link
  </AcvButton>
</template>

<style scoped>
  .acv-button {
    margin-right: 8px;
  }
</style>

With single icon

Source code

vue

<script setup>
  import Button from '@/components/button/button.vue';
  import { IconAddressBook32 } from '@acronis-platform/icons/address';
  </script>

<template>
  <div class="acv-grid-row acv-grid--cols-3">
    <Button
      size="large"
    >
      <template #prepend>
        <IconAddressBook32 />
      </template>
    </Button>
    <Button>
      <template #prepend>
        <IconAddressBook32 />
      </template>
    </Button>
    <Button size="small">
      <template #prepend>
        <IconAddressBook32 />
      </template>
    </Button>

    <Button
      size="large"
      variant="ghost"
    >
      <template #prepend>
        <IconAddressBook32 />
      </template>
    </Button>
    <Button
      variant="ghost"
    >
      <template #prepend>
        <IconAddressBook32 />
      </template>
    </Button>
    <Button
      size="small"
      variant="ghost"
    >
      <template #prepend>
        <IconAddressBook32 />
      </template>
    </Button>

    <Button
      size="large"
      variant="secondary"
    >
      <template #prepend>
        <IconAddressBook32 />
      </template>
    </Button>
    <Button
      variant="secondary"
    >
      <template #prepend>
        <IconAddressBook32 />
      </template>
    </Button>
    <Button
      size="small"
      variant="secondary"
    >
      <template #prepend>
        <IconAddressBook32 />
      </template>
    </Button>
  </div>
</template>

<style scoped>
.acv-grid-row{
  display: grid;
  width: 100%;
  place-items: start;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.acv-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
</style>

Block buttons

Create block buttons that use full width of the parent container. Set up the block prop to make the button full width.

Source code

vue

<script setup>
  import Button from '@/components/button/button.vue';
</script>

<template>
  <Button
    block
    variant="primary"
  >
    Block Button
  </Button>
</template>

Accessibility

Provided AcvButton component must adapt to the list of WAI-ARIA accessibility patterns.

Overview

The button component is a simple button that allow users to trigger an action or event, such as submitting a form, opening dialog or performing operations.

We provide the following features to make the button accessible:

Accessible label (attribute to provide a label that describes the button's action): by default it will be text content inside the AcvButton component, but it can be provided by applying aria-label or aria-labelledby .
Accessible description (attribute sets ID of the element that describes the button): it can be provided by applying aria-describedby.
Inaccessible button (if button action is not available): by applying aria-disabled attribute.
Toggle button (if button has a toggle state): by applying aria-pressed attribute.

WAI-ARIA attributes

role="button" attribute to make the button accessible.
aria-disabled attribute to indicate that the button is disabled.
tabindex attribute to make the button focusable.
aria-pressed attribute to indicate the current state of the button.
aria-expanded attribute to indicate the current state of the button.
aria-haspopup attribute to indicate that the button has a popup.
aria-controls attribute to indicate the element that the button controls.
aria-label attribute to provide a label that describes the button's action. This is especially useful when the button contains only an icon.
aria-labelledby attribute to indicate the element that labels the button.
aria-describedby attribute to indicate the element that describes the button.
aria-owns attribute to indicate the element that the button owns.
aria-haspopup attribute to indicate that the button has a popup.
aria-haspopup attribute to indicate that the button has a popup.

Keyboard interaction

Enter or Space key to activate the button.

Router links

When href or to props are set, the button is rendered as an <a> element with role="button" attribute.

Props

Prop name	Description	Type	Values	Default
variant	Button variant	AcvButtonVariant	primary, secondary, ghost, inverted	primary
is	Button tag	"a" \| "span" \| "button" \| "label" \| TSTypeQuery	a, span, button, label, RouterLink	button
type	Button type	TSIndexedAccessType	button, submit, reset	button
size	Button size	AcvButtonSize	small, medium, large	medium
selected	Whether button appearance as selected	boolean	-
autofocus	Same as native button's autofocus	boolean	-
disabled	Disable the button	boolean	-
icon	Button icon	IconSource	-
loading	Determine whether it's loading	boolean	-

Slots

Name	Description	Bindings
prepend	Left side slot content. Usually for icon
default	Default slot content. Usually for text
append	Right side slot content. Usually for icon

ACV Button ​

Overview ​

Basic button ​

Variants ​

Default state ​

Hovered state ​

Focused state ​

Disabled state ​

Active, pressed state ​

Selected state ​

Loading state ​

Sizing ​

With icons ​

Button types ​

With single icon ​

Block buttons ​

Accessibility ​

Overview ​

WAI-ARIA attributes ​

Keyboard interaction ​

Router links ​

See also ​

Props ​

Slots ​

ACV Button

Overview

Basic button

Variants

Default state

Hovered state

Focused state

Disabled state

Active, pressed state

Selected state

Loading state

Sizing

With icons

Button types

With single icon

Block buttons

Accessibility

Overview

WAI-ARIA attributes

Keyboard interaction

Router links

See also

Props

Slots