# Button Triggers an action, submits a form, or navigates to another location. ```html Create project ``` ## Attributes | Attribute | Type or allowed values | Default | Description | | --- | --- | --- | --- | | `aria-describedby` | `string` | None | Identifies the element that describes the button. | | `aria-label` | `string` | None | Provides an accessible name when visible text is unavailable. | | `aria-labelledby` | `string` | None | Identifies the element that labels the button. | | `title` | `string` | None | Provides advisory information for the button. | | `autofocus` | `boolean` | `false` | Focuses the button when the page loads. | | `disabled` | `boolean` | `false` | Prevents activation and form submission. | | `download` | `string` | None | Downloads the linked resource, optionally using this value as the filename. | | `form` | `string` | None | Associates the button with a form by element identifier. | | `formaction` | `string` | None | Overrides the associated form action for this submit button. | | `formenctype` | `string` | None | Overrides the associated form encoding type for this submit button. | | `formmethod` | `string` | None | Overrides the associated form method for this submit button. | | `formnovalidate` | `boolean` | `false` | Skips validation when this button submits its associated form. | | `formtarget` | `string` | None | Overrides where the associated form response is displayed. | | `href` | `string` | `""` | Renders the control as a link to this location. | | `icon-only` | `boolean` | `false` | Uses the default slot as the entire button content. An accessible label is required. | | `label` | `string` | `""` | Provides fallback text when the default slot is empty. | | `name` | `string` | `""` | Sets the form field name submitted with the button value. | | `rel` | `string` | None | Sets the relationship between the current page and a linked resource. | | `size` | `small`, `medium`, `large` | `"large"` | Controls the button dimensions and text size. | | `target` | `string` | None | Controls where a linked resource is opened. | | `type` | `button`, `reset`, `submit` | `"submit"` | Controls native button behavior when href is absent. | | `value` | `string` | `""` | Sets the form value submitted with the button name. | | `variant` | `primary`, `secondary`, `destructive` | `"primary"` | Controls the visual emphasis and semantic intent. | ## Read-only properties | Property | Type | Description | | --- | --- | --- | | `control` | `HTMLAnchorElement \| HTMLButtonElement \| null` | The native link or button rendered inside the component. | | `form` | `HTMLFormElement \| null` | The form associated with the button, if one exists. | ## Slots | Slot | Description | | --- | --- | | `default` | The visible label, or the complete content when icon-only is present. | | `icon-left` | An icon displayed before the label. | | `icon-right` | An icon displayed after the label. | ## Styling parts | Part | Description | | --- | --- | | `control` | The native link or button control. | Use the standard `::part()` selector when an application needs a targeted override: ```css noora-button::part(control) { inline-size: 100%; } ``` The component emits the standard browser click event. It renders a native link when href is present and the component is enabled. Otherwise, it renders a native button and supports form submission and reset. ## Variants Choose a semantic variant through the variant attribute. ```html Primary Secondary Destructive ``` ## Sizes The default size is large. ```html Small Medium Large ``` ## Icons and states Named slots place icons around the label. Icon-only buttons require an accessible label. ```html Previous Continue Disabled ```