# certara-button



<!-- Auto Generated Below -->


## Overview

Buttons are used to trigger an action or an event. Button labels let the user know what to expect by clearly communicating what selecting the button will do or where it will take them.

## Properties

| Property              | Attribute               | Description                                                         | Type                                                                        | Default     |
| --------------------- | ----------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------- |
| `block`               | `block`                 | When true, button spans full width                                  | `boolean`                                                                   | `false`     |
| `color`               | `color`                 | Color options for buttons                                           | `"brand" \| "danger" \| "inverse" \| "neutral" \| "secondary" \| "success"` | `'brand'`   |
| `configAria`          | `config-aria`           | ARIA overrides merged onto the inner element; reflected and mutable | `any`                                                                       | `{}`        |
| `disabled`            | `disabled`              | Disables the control                                                | `boolean`                                                                   | `false`     |
| `href`                | `href`                  | When set, renders as anchor with this href instead of button        | `string`                                                                    | `undefined` |
| `innerClassName`      | `inner-class-name`      | CSS classes applied to the inner button or anchor                   | `string`                                                                    | `undefined` |
| `leftIcon`            | `left-icon`             | Icon name to appear on the left                                     | `string`                                                                    | `undefined` |
| `popoverTarget`       | `popover-target`        | ID of popover element to control (Popover API)                      | `string`                                                                    | `undefined` |
| `popoverTargetAction` | `popover-target-action` | Popover action                                                      | `"hide" \| "show" \| "toggle"`                                              | `undefined` |
| `rightIcon`           | `right-icon`            | Icon name to appear on the right                                    | `string`                                                                    | `undefined` |
| `selected`            | `selected`              | When true, button is selected                                       | `boolean`                                                                   | `false`     |
| `showLoader`          | `show-loader`           | When true, shows spinner and disables interaction                   | `boolean`                                                                   | `false`     |
| `size`                | `size`                  | Visual size of button                                               | `"lg" \| "md" \| "sm"`                                                      | `'md'`      |
| `target`              | `target`                | Link target when href is set                                        | `"_blank" \| "_parent" \| "_self" \| "_top" \| "_unfencedTop"`              | `undefined` |
| `type`                | `type`                  | Native button type                                                  | `"button" \| "reset" \| "submit"`                                           | `'button'`  |
| `variant`             | `variant`               | Visual style options for buttons                                    | `"default" \| "icon" \| "icon-rounded" \| "link" \| "outline" \| "reset"`   | `'default'` |


## Events

| Event          | Description                                                                        | Type                |
| -------------- | ---------------------------------------------------------------------------------- | ------------------- |
| `certaraBlur`  | Emitted when the inner element loses focus                                         | `CustomEvent<void>` |
| `certaraClick` | Emitted on click when not disabled and not loading; detail includes element (host) | `CustomEvent<any>`  |
| `certaraFocus` | Emitted when the inner element receives focus                                      | `CustomEvent<void>` |


## Dependencies

### Used by

 - [certara-datepicker](../datepicker)
 - [certara-dropdown](../dropdown)
 - [certara-input-numeric](../input-numeric)

### Depends on

- [certara-icon](../icon)

### Graph
```mermaid
graph TD;
  certara-button --> certara-icon
  certara-datepicker --> certara-button
  certara-dropdown --> certara-button
  certara-input-numeric --> certara-button
  style certara-button fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------