Quick Action Button (QAB)

A floating action button fixed to a corner of the viewport. It opens a short menu of actions, so the common ones are one tap away instead of buried in a menu.

About

The Quick Action Button (QAB) is a floating button fixed to a corner of the viewport. Tapping or hovering it opens the actions you put inside. Because it is fixed, render it once per page and keep it outside any scrolling container.

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. They are the same colors the Button uses. The available color options are "brand", "error", "info", "success", and "warning". The default value is "brand".

Each color carries a meaning, so a reader can tell a destructive action from a safe one. You can still pass your own classes, but the color prop keeps the whole app on one palette.

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 fills the button background with a two color gradient.

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 -->

In "hover" mode, the items stay open while the pointer moves from the main button to the items, and keyboard users open them by focusing the main button. They close when the pointer or focus leaves the QAB.

Disabled QAB

Add the disabled attribute to the Qab to disable the main button. It is dimmed and its items can't be opened. You can also disable an individual QabItem. A disabled QAB or item gets aria-disabled="true", and a disabled link item has its link removed.

Svelte 
<!-- Disabled main button -->
<Qab disabled> ... </Qab>

<!-- Disabled item -->
<Qab>
  <QabItem>1</QabItem>
  <QabItem disabled>2</QabItem>
</Qab>

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, "lg", "xl" or "2xl" for more rounded edges, "full" for fully circular buttons (default), or "none" to keep the corners sharp.

Svelte 
<Qab rounded="none"> ... </Qab>
<Qab rounded="full"> ... </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="normal"> ... </Qab> <!-- Default -->

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-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 the default icon of all the QAB items (items without their own content), you can use iconClasses on the Qab component. The items also inherit size, rounded, theme, color and gradientColor from 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-200">
    <Svg>
      <path d="M13.601 2.326A7 0 ... 943-.049-.084-.182-.133-.38-.232"/>
    </Svg>
  </QabItem>
  <QabItem class="border-4 border-brand-200">
    <Svg>
      <path d="M3.654 1.328a 0 0 ... .362-1.03-.037-2.137.703-2.877z"/>
    </Svg>
  </QabItem>
</Qab>

Accessibility

The QAB sets aria-expanded and aria-controls on the trigger, and Escape closes the open items.

ARIA Labels

The ariaLabel prop sets the accessible name of the trigger. The default is "Quick Action Button", which is worth changing to say what the button actually does.

A QabItem uses its content as its accessible name. If the content is only an icon, set ariaLabel on the item to describe the action. An item without content (showing the default icon) is named "Quick Action Item".

Svelte 
<Qab ariaLabel="Open quick actions">
  <QabItem ariaLabel="Call us">
    <Svg>...</Svg>
  </QabItem>
</Qab>

Keyboard Navigation

The QAB supports standard keyboard interactions: use the Tab key to move to the main button and the items, and the Enter or Space keys to open the items or trigger an action. Pressing Escape closes the open items; if focus was on an item, it returns to the main button. In "hover" mode, the items open when the main button gets focus.

Automatic ARIA Management

The QAB component automatically handles important ARIA attributes:

  • The role attribute is set to button, or link when href is used.
  • When the QAB has items, the main button gets aria-expanded to show whether the items are open, and aria-controls pointing to the items while they are open.
  • A disabled QAB or QAB item gets aria-disabled="true".
  • The open items close when the user clicks anywhere outside the QAB.

Configuration

QAB

QAB Item