# r-button
A button can be used by a user to trigger an action. Corresponds to, and is rendered as a,
[native button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).
Example:
```
Submit
Cancel
Disabled
Full width
```
## class: `RButton`, `r-button`
### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| ------------------ | ------- | --------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `disabled` | | `boolean` | | Prevents user interaction and applies disabled style | |
| `expanded` | | `boolean` | | Whether to present as a full-width (100%) button.
Only primary and secondary buttons can be expanded. | |
| `form` | | `string` | | Reference form element id with which the button is associated. | |
| `href` | | `string` | | URL or a URL fragment that the hyperlink points to.
If the property is set, an anchor tag will be rendered. | |
| `icon` | | `string` | | Name of an icon to display within button. | |
| `iconPosition` | | `"end" \| "start"` | `'start'` | Position of an icon within button.
Only use it when 'icon' is specified. | |
| `rAriaCurrent` | | `"date" \| "false" \| "location" \| "page" \| "step" \| "time" \| "true"` | | Indicates the current item within a set of related elements.
Corresponds to
\[native `aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) | |
| `rAriaDescription` | | `string` | | Sets string value for `aria-description` attribute
(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description) | |
| `rAriaLabel` | | `string` | | Sets string value for `aria-label` attribute
(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) | |
| `size` | | `"large" \| "small"` | `'large'` | Visual size | |
| `target` | | `"_blank" \| "_parent" \| "_self" \| "_top"` | | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | |
| `type` | | `"button" \| "reset" \| "submit"` | `'button'` | Button behavior, corresponding to
\[native `type` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | |
| `variant` | | `"blank" \| "destructive" \| "primary" \| "secondary" \| "text" \| "text-inline"` | `'primary'` | Presentational style | |
### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| -------------- | ------- | ---------------------------- | ---------- | --------------- | -------------- |
| `setBlur` | | Remove focus from the button | | `Promise` | |
| `setFocus` | | Set focus on the button | | `Promise` | |
| `triggerClick` | | Simulate a button click | | `Promise` | |
### Events
| Name | Type | Description | Inherited From |
| -------- | ------------------ | --------------------------------------- | -------------- |
| `rClick` | `CustomEvent` | Emits `rClick` event on click and keyup | |
### Attributes
| Name | Field | Inherited From |
| -------------------- | ---------------- | -------------- |
| `disabled` | disabled | |
| `expanded` | expanded | |
| `form` | form | |
| `href` | href | |
| `icon` | icon | |
| `icon-position` | iconPosition | |
| `r-aria-current` | rAriaCurrent | |
| `r-aria-description` | rAriaDescription | |
| `r-aria-label` | rAriaLabel | |
| `size` | size | |
| `target` | target | |
| `type` | type | |
| `variant` | variant | |
### Slots
| Name | Description |
| ------ | ------------------------------------------------------------------------------ |
| | Button label text |
| `icon` | Icon placed inside the button (position controlled by the `iconPosition` prop) |
## Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | ---------- | ----------- | ------ | ------- |
| `js` | `RButton` | RButton | | |
| `custom-element-definition` | `r-button` | RButton | | |