# gds-button

**Class**: `GdsButton`

**Tag**: `<gds-button>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
| `disabled` | `boolean` | `-` | Whether the button is disabled. |
| `'justify-content'` | `string \| undefined` | `-` | Spread the contents of the button |
| `type` | `HTMLButtonElement['type'] \| undefined` | `-` | The type of the button. |
| `rank` | `'primary' \| 'secondary' \| 'tertiary'` | `-` | The rank of the button. Defaults to "primary". |
| `variant` | `\| 'brand'     \| 'neutral'     \| 'positive'     \| 'negative'     \| 'notice'     \| 'warning'` | `-` | Defines which variant the button belongs to. Defaults to "neutral". |
| `size` | `'xs' \| 'small' \| 'medium' \| 'large'` | `-` | Sets the size of the button. Defaults to "medium". |
| `label` | `string` | `-` | The label of the button. Use this to add an accessible label to the button when no text is provided in the default slot. |
| `href` | `string` | `-` | When set, the underlying button will be rendered as an anchor element. |
| `target` | `'_self' \| '_blank' \| '_parent' \| '_top' \| undefined` | `-` | Where to display the linked URL. Only used when href is present. |
| `rel` | `string \| undefined` | `-` | The relationship of the linked URL as space-separated link types. Only used when href is present. Defaults to "noreferrer noopener" for security reasons when target is set. |
| `download` | `string \| undefined` | `-` | Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Only used when href is present. |
| `validator` | `GdsValidator \| undefined` | `-` | A validator that can be used to validate the form control and set an error message. |
| `required` | `boolean` | `-` | The required attribute can be used to communicate to users of assistive technology that the control is required. Validation still needs to be done in a validator or equivalent. |
| `errorMessage` | `string` | `-` | This can be used to manually control the error message that will be displayed when the control is invalid. |
| `invalid` | `any` | `-` | Validation state of the form control. Setting this to true triggers the invalid state of the control. |
| `value` | `any` | `-` | Get or set the value of the form control. |
| `name` | `string` | `-` |  |


## Events

| Name | Type | Description |
|------|------|-------------|
| `click` | `MouseEvent` | Fired when the button is clicked. |


## Slots

| Name | Description |
|------|-------------|
| `(default)` | Content to be displayed as the button label. |
| `lead` | An optional slot that allows a `gds-icon-[ICON_NAME]` element to be placed before the label. |
| `trail` | An optional slot that allows a `gds-icon-[ICON_NAME]` element to be placed after the label. |


## Form Control

This component is a form control and inherits form-related properties and methods.


## Routing Support

This component supports routing via the `href` property.
