> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qomicex.top/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

## Button

A clickable button that can bind a launcher action or function.

## Signature

```xml theme={null}
<Button Text="启动" Size="Md" Variant="Default"
        OnClick="Launch" />

<Button OnClick="Navigate" To="Instances">
  实例管理
</Button>
```

## Attributes

| Attribute | Type | Default | Description |
| :- | :- | :- | :- |
| `Name` | identifier | — | Key used by `Click` triggers to target the button |
| `Text` | string | Required | Button text |
| `Variant` | `Default` / `Secondary` / `Outline` / `Ghost` / `Destructive` / `Link` | `Default` | Style |
| `Size` | `Sm` / `Md` / `Lg` | `Md` | Size |
| `OnClick` | action | — | Click action |

Action parameters go directly on the `Button` as attributes or attribute elements; see the [Actions reference](https://docs.qomicex.top/en/guide/custom-widget/reference/actions.md).

### Size / Variant values

| Attribute | Value | Effect |
| :- | :- | :- |
| `Size` | `Sm` | Small button for list rows and compact toolbars |
| `Size` | `Md` | Default size |
| `Size` | `Lg` | Large button for primary actions |
| `Variant` | `Default` | Primary solid button |
| `Variant` | `Secondary` | Secondary, less emphasized |
| `Variant` | `Outline` | Outlined button |
| `Variant` | `Ghost` | No background until hover |
| `Variant` | `Destructive` | Destructive red action |
| `Variant` | `Link` | Text-link style |

`Button.Size` only accepts `Sm` / `Md` / `Lg`; the `Xs`–`2Xl` values of `Text.Size` do not apply to buttons. See [Attribute values](https://docs.qomicex.top/en/guide/custom-widget/reference/values.md) for the full table.

## ShortcutKeys

```xml theme={null}
<Button Text="Shortcut action" OnClick="Refresh">
  <Button.ShortcutKeys>
    <ShortcutKey Key="Alt" />
    <ShortcutKey Key="L" />
  </Button.ShortcutKeys>
</Button>
```

* Supports `Alt` / `Ctrl` / `Shift` / `Meta` modifiers and one main key.
* You can also write `<ShortcutKey Key="Alt+L" />`.
* Multiple `ShortcutKey` elements form one shortcut.
* Shortcuts are ignored while an input is focused.
* A shortcut runs the same `OnClick` / `Click` trigger as a button click.

## Effects

Buttons support the same `<Button.Effects>` as other visual nodes:

```xml theme={null}
<Button Text="Emphasized">
  <Button.Effects>
    <ShadowEffect Radius="8" Color="Black" />
  </Button.Effects>
</Button>
```

See [Effects](https://docs.qomicex.top/en/guide/custom-widget/advanced/effects.md) for effect types and Trigger usage.

## Content syntax

```xml theme={null}
<Button OnClick="Refresh">刷新</Button>
```

Equivalent to `Text="刷新"`.

## Runtime behavior

* Renders the launcher `Button` component.
* With an empty `OnClick` the button is clickable but does nothing.
* A click first fires the `Click` trigger with the same `Name`, then runs `OnClick`.
* In preview mode `RunCommand` / `PluginApi` do not execute.

## Example

```xml theme={null}
<Row Gap="2">
  <Button Text="启动" OnClick="Launch" />
  <Button Text="实例" Variant="Outline" OnClick="Navigate" To="Instances" />
  <Button Text="更多" Variant="Ghost" OnClick="OpenUrl" Url="https://example.com" />
</Row>
```

## Gotchas

* The action parameters of `OnClick` must belong to that action; wrong ones are rejected by XML validation.
* Long button text widens the button; for wrapping, use `Text` inside a custom container, or shorten the text.
* `Name` is not the display text; it only targets triggers.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.