# gds-button **Class**: `GdsButton` **Tag**: `` ## Properties > Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values. | 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. | | `wrapped` | `boolean` | `-` | When set, adds a wrapped class to the button. | | `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` | `-` | | | `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`. This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected. Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. | ## 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.