# 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:
```html
Link 1Link 2Link 3
```
## Link
The `href` prop allows the main Quick Action Button (QAB) to function as a link. When this prop is set, the button will navigate to the specified URL when clicked.
```html
```
In this example, clicking the main button will take the user to the `/about` page. This prop makes it easy to turn the QAB into a navigational link while still maintaining its quick action functionality.
## 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.
```html
... ...
```
## 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.
```html
... ... ... ...
```
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'`.
```html
... ...
```
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"`.
```html
12
```
```html
123
```
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.
```html
...
```
```html
123
```
### Gradient Theme
The gradient theme fills the button background with a two color gradient.
```html
...
```
```html
123
```
> **Note:** The color prop can still be used with each theme to specify the button's color, allowing flexibility while maintaining consistency across different button themes.
## 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"`.
```html
... ...
```
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.
```html
... 12
```
## 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.
```html
... ...
```
## 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"`.
```html
... ...
```
## 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.
```html
{#snippet icon()}
{/snippet}
```
### 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.
```html
```
## 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"`.
```html
```
### 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
---
Category: Components
Keywords: quick-action-button, qab, fab, fab-button, button, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss
Full documentation set: https://www.theui.dev/llms-full.txt