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

Source code

vue

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

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

Types

Source code

vue

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

<template>
  <AcvButton type="primary">
    Primary
  </AcvButton>
  <AcvButton type="secondary">
    Secondary
  </AcvButton>
  <AcvButton type="ghost">
    Ghost
  </AcvButton>
  <AcvButton type="danger">
    Danger
  </AcvButton>
  <div
    class="dark"
  >
    <AcvButton type="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>

States

Buttons can have different states. They support active, focus, hover, and disabled states.

Use disabled=true to disable button.

Source code

vue

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

  const buttonTypes = [
    'primary',
    'secondary',
    'ghost',
    'inverted',
    'danger'
  ];
</script>

<template>
  <div class="acv-grid-row acv-grid--cols-3">
    <div
      v-for="type in buttonTypes"
      :key="type"
      align="center"
      :width="8"
      :class="{
        'acv-bg-nav-primary': type === BUTTON_TYPE.inverted,
      }"
    >
      <Button :type="type">
        <IconAcronisIcon32 />
        Default {{ type }}
      </Button>
      <Button
        :type="type"
        class="hover"
      >
        Hover {{ type }}
      </Button>
      <Button
        :type="type"
        class="active"
      >
        Active {{ type }}
      </Button>
      <Button
        :type="type"
        class="focus"
      >
        Focus {{ type }}
      </Button>
      <Button
        :type="type"
        disabled
      >
        Disabled {{ type }}
      </Button>
    </div>
  </div>
</template>

<style scoped>
  .acv-cell {
    padding-block: 16px;
    padding-inline: 16px;
  }

  .acv-button {
    margin-block: 10px;
    display: block;
  }
</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 { ref } from 'vue';
  import Button from '@/components/button/button.vue';
  import AcvCheckbox from '@/components/checkbox/checkbox.vue';
  import Row from '@/components/row/row.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;
  }
}
</style>

Success state

Using success state is a good way to indicate that the action was successful.

Use the success prop to show a success state.

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="outline">
      Default button
    </AcvButton>
    <AcvButton
      variant="outline"
      size="large"
    >
      Large button
    </AcvButton>
  </div>
</template>

With icons

Use icon and prepend-icon props to add icons to buttons. Also, you can use inline icons in default slot.

Source code

vue

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

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

<style scoped>
.acv-button {
  margin-block: 10px;
}
</style>

Button types

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

TIP

Type 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 { IconAddressBook32 } from '@acronis-platform/icons/address';
  import Button from '@/components/button/button.vue';
  </script>

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

    <Button
      :icon="IconAddressBook32"
      size="large"
      variant="ghost"
    />
    <Button
      :icon="IconAddressBook32"
      variant="ghost"
    />
    <Button
      size="small"
      variant="ghost"
    >
      <IconAddressBook32 />
    </Button>

    <Button
      :icon="IconAddressBook32"
      size="large"
      variant="outline"
    />
    <Button
      :icon="IconAddressBook32"
      variant="outline"
    />
    <Button
      size="small"
      variant="outline"
    >
      <IconAddressBook32 />
    </Button>
  </div>
</template>

<style scoped>
.acv-button {
  margin-block: 10px;
}
</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
type	Button type	AcvButtonType	primary, secondary, ghost, danger, inverted
variant	Button variant	AcvButtonVariant	solid, outline, ghost, light	solid
color	Color of the button	ButtonColor	primary, secondary, inverted, neutral, info, warning, success, critical, danger, info	primary
is	Button tag	"a" \| "span" \| "button" \| "label" \| TSTypeQuery	a, span, button, label, RouterLink	button
buttonType	Button type	TSIndexedAccessType	button, submit, reset	button
icon	Button icon, accepts an icon name of Icon component	IconProp	-
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	-
loading	Determine whether it's loading	boolean	-
appendIcon	Button icon on the right side, accepts any Icon component	IconProp	-
block	Whether the button is block styled or not	boolean	-	false
pill	Whether the button is rounded or not	boolean	-	false
squared	Whether the button is squared or not	boolean	-	false

Slots

Name	Description	Bindings
prepend	Left side slot content
default	The default slot content
append	Right side slot content

ACV Button ​

Overview ​

Types ​

States ​

Default state ​

Hovered state ​

Focused state ​

Disabled state ​

Active, pressed state ​

Selected state ​

Loading state ​

Success 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

Types

States

Default state

Hovered state

Focused state

Disabled state

Active, pressed state

Selected state

Loading state

Success state

Sizing

With icons

Button types

With single icon

Block buttons

Accessibility

Overview

WAI-ARIA attributes

Keyboard interaction

Router links

See also

Props

Slots