Quick Action Button (QAB)

The Quick Action Button (QAB) is a small but important button designed to provide fast and easy access to key actions. It helps users quickly perform important tasks without navigating through multiple menus.

About

The Quick Action Button (QAB) is designed to offer users quick and easy access to important actions or features. Positioned prominently, it enhances user engagement and streamlines workflows. The QAB supports various styles and configurations, making it a versatile and essential component for improving efficiency and user experience.

Example

To use the Quick Action Button (QAB) in your Svelte application, you need to import both the Qab container and the QabItem component from the theui-svelte package:

Svelte 
<script>
  import { Qab, QabItem } from "theui-svelte";
</script>

<Qab>
  <QabItem>Link 1</QabItem>
  <QabItem>Link 2</QabItem>
  <QabItem>Link 3</QabItem>
</Qab>

Alignment

The align prop controls the horizontal alignment of the Quick Action Button (QAB) container. You can set it to either 'start' or 'end', with the default value being 'end'.

By setting the align prop, you can easily control the horizontal position of the buttons within the container.

Svelte 
<Qab align="end"> ... </Qab>
<Qab align="start"> ... </Qab>

Sizes

The size prop lets you control how big the Quick Action Button (QAB) is. You can set it to 'sm' for small, 'md' for medium (which is the default), 'lg' for large, or 'xl' for extra large.

Svelte 
<Qab size="sm"> ... </Qab>
<Qab size="md"> ... </Qab> <!-- Default -->
<Qab size="lg"> ... </Qab>
<Qab size="xl"> ... </Qab>

By changing the size prop, you can easily adjust the button's size to match your needs.

Direction

The direction prop determines how the Quick Action Buttons (QAB) are arranged. You can set it to 'horizontal' to place the buttons side by side, or 'vertical' to stack them on top of each other. The default value is 'vertical'.

Svelte 
<Qab direction="horizontal"> ... </Qab>
<Qab direction="vertical"> ... </Qab> <!-- Default -->

By changing the direction prop, you can control whether the buttons are displayed in a row or a column, depending on your design needs.

QAB Color

The color prop customizes the QAB button's appearance by applying predefined color themes. These themes correspond to various statuses or actions, ensuring consistent visual design throughout your application. The available color options are "brand", "error", "info", "success", and "warning". The default value is "brand".

Each color serves a purpose, making design intuitive and user-friendly. While you can customize colors with the class attribute, the color prop offers a quick and consistent solution.

Theme

The theme prop determines the overall style and background of the button. It accepts three values: 'default', 'soft', and 'gradient'. The default theme applies the standard button styles, while the soft theme uses softer versions of the default colors for a softer look. The gradient theme gives a more vibrant feel by applying gradient backgrounds to the button.

Soft Theme

The soft theme is a softer variation of the default button colors, making it suitable for more subtle designs.

Gradient Theme

The gradient theme applies vibrant gradient colors to the button background, providing a more modern and eye-catching look.

QAB Trigger Event

The triggerEvent prop controls how the Quick Action Button (QAB) is activated. You can choose "click" to make the button activate when the user clicks on it, or "hover" to activate it when the user moves their mouse over it. By default, it is set to "click".

Svelte 
<Qab triggerEvent="hover"> ... </Qab>
<Qab triggerEvent="click"> ... </Qab> <!-- Default -->

This prop helps you decide how users interact with the QAB, making it more flexible to fit different user experiences.

Rounded Button

The rounded prop adjusts how rounded the corners of the Quick Action Buttons (QAB) are. You can choose from different levels such as "sm" for slightly rounded corners, "md" for medium rounding (default), "lg" or "xl" for more rounded edges, "full" for fully circular buttons, or "none" to keep the corners sharp.

Svelte 
<Qab rounded="none"> ... </Qab>
<Qab rounded="md"> ... </Qab> <!-- Default -->

Animation Speed

The animationSpeed prop controls how fast the Quick Action Button (QAB) animations run. You can set it to values like "none" for no animation, "slower" or "slow" for a more gradual effect, "normal" for the default speed, or "fast" and "faster" for quicker animations. The default setting is "normal".

Svelte 
<Qab animationSpeed="slower"> ... </Qab>
<Qab animationSpeed="fast"> ... </Qab> <!-- Default -->

These props allow you to customize the button's animation speed and corner style to better match your design needs.

Customization

There are various way to customize the QAB button and QAB items. You can use theme, color, and gradientColor prop to customize the color showing above.

Main Button Customization

You can apply custom classes to customize the main QAB button with the class attribute. Also, to change the icon of the main QAB button, just use icon snippet.

Svelte 
<Qab class="border-4 border-brand-primary-200">
  {#snippet icon()}
  <Svg class="w-6 h-6">
    <path d="M2 1a1 1 0 0 ... 2 0 0 1 2-2z"/>
  </Svg>
  {/snippet}
</Qab>

Item Customization

Use class attribute to apply custom classes to the QAB items. To change the icon write it inside the QabItem component.

Again, if you want to apply some common classes to all the QAB item's icon, you can use iconClasses on the Qab component.

Svelte 

<Qab iconClasses="text-yellow-300">
    <Svg>
      <path d="M8 1a5 5 0 0 ... 0 0 1 1-1h1V6a5 5 0 0 0-5-5"/>
    </Svg>
  <QabItem class="border-4 border-brand-primary-200">
    <Svg>
      <path d="M13.601 2.326A7 0 ... 943-.049-.084-.182-.133-.38-.232"/>
    </Svg>
  </QabItem>
  <QabItem class="border-4 border-brand-primary-200">
    <Svg>
      <path d="M3.654 1.328a 0 0 ... .362-1.03-.037-2.137.703-2.877z"/>
    </Svg>
  </QabItem>
</Qab>

Accessibility

The Quick Action Button (QAB) component includes built-in support for accessibility, ensuring a better experience for all users.

ARIA Labels

The ariaLabel prop allows you to provide an accessible name for the QAB button, ensuring screen readers can describe its function clearly.

Svelte 
<Qab ariaLabel="Open quick actions"> ... </Qab>

Keyboard Navigation

The Button component supports standard keyboard interactions, allowing users to navigate and activate it using the Tab key to focus and the Enter or Space keys to trigger the action.

By following these guidelines and using the provided props, you can ensure that the Button component enhances accessibility, providing a seamless experience for all users.

Automatic ARIA Management

The QAB component automatically handles important ARIA attributes:

  • The role attribute is set to ensure the component is recognized as a button.
  • The aria-expanded attribute is automatically managed to indicate the open or closed state if the button controls additional content.

Configuration

QAB

QAB Item