# Action

A low-level action element that can render as `<button>`, `<a>`, or `<span>`. When `to` is provided, it renders as a link. Used as a base for `Button` and `Link`.

## When to Use

- Building custom interactive elements
- Actions that may navigate or submit
- When you need a button that can become a link via the `to` prop

## Properties

- **`to`** `NavigateArg` — Navigation target (renders as `<a>` when provided)
- **`label`** `string` — Accessible label for screen readers
- **`htmlType`** `'button' | 'submit' | 'reset'` — HTML button type
- **`download`** `string` — Download attribute for link mode
- **`onPress`** `() => void` — Press event handler (React Aria)

### Style Defaults

- `position` — `relative`
- `preset` — `inherit`
- `transition` — `theme`

### Base Properties

Supports [Base properties](../../BaseProperties.md). Extends React Aria `AriaButtonProps`.

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Text:** `textTransform`, `fontWeight`, `fontStyle`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

### Button action

```jsx
<Action onPress={() => doSomething()}>Click me</Action>
```

### Navigation action

```jsx
<Action to="/dashboard">Go to Dashboard</Action>
```

### Form submit

```jsx
<Action htmlType="submit">Submit</Action>
```
