# Button
Buttons allow users to take action.

**Material documentation:**
[Buttons](https://material.io/design/environment/buttons.html)

**Selector:**
og-button

**Use:**
`<og-button></og-button>`

## Module
```javascript
import { ButtonModule } from '@opensesame/opensesameui;
```

## Types
```javascript
import { ButtonProps } from '@opensesame/opensesameui';
import { ButtonClasses } from '@opensesame/opensesameui';
```

## Props
Name | Type | Default | Description
---- | ---- | ------- | -----------
classes | object | | Override or extend the styles applied to the component.
className | string | | Class(es) applied to the component.
color | 'default' &#124; 'inherit' &#124; 'primary' &#124; 'secondary' | 'default' | The color of the button.
disabled | boolean | false | If `true`, the button is disabled.
disableElevation | boolean | false | If `true`, no elevation is used.
endIcon | string | | The Material Icon name for an icon at the end of the button content.
fullWidth | boolean | false | If `true`, the button will be the full width of its container.
size | 'large' &#124; 'medium' &#124; 'small' | 'medium' | The size of the button
startIcon | string | | The Material Icon name for an icon at the start of the button content.
type | 'button' &#124; 'reset' &#124; 'submit' | 'button' | The button type.
variant | 'contained' &#124; 'outlined' &#124; 'text' | 'outlined' | The button variant.

## Classes
Rule name | Class | Description
--------- | ----- | -----------
root | .og-button-root | Styles applied to the root element.
colorInherit | .og-button-color-inherit | Styles applied if `color="inherit"`.
contained | .og-button-contained | Styles applied if `variant="contained"`.
containedPrimary | .og-button-contained-primary | Styles applied if `variant="contained"` and `color="primary"`.
containedSecondary | .og-button-contained-secondary | Styles applied if `variant="contained"` and `color="secondary"`.
containedSizeLarge | .og-button-contained-size-large | Styles applied if `variant="contained"` and `size="large"`.
containedSizeSmall | .og-button-contained-size-small | Styles applied if `variant="contained"` and `size="small"`.
disabled | .og-button-disabled | Pseudo-class applied when `[disabled]="true"`.
disableElevation | .og-button-disable-elevation | Styles applied if `[disableElevation]="true"`.
endIcon | .og-button-end-icon | Styles applied if an endIcon is provided.
focusVisible | .og-button-focus-visible | Pseudo-class applied if button is keyboard focused.
fullWidth | .og-button-full-width | Styles applied if `[fullWidth]="true"`.
iconSizeLarge | .og-button-icon-size-large | Styles applied to the icon element if `size="large"`.
iconSizeMedium | .og-button-icon-size-medium | Styles applied to the icon element if `size="medium"`.
iconSizeSmall | .og-button-icon-size-small | Styles applied to the icon element if `size="small"`.
label | .og-button-label | Styles applied to the child span that wraps the button content.
outlined | .og-button-outlined | Styles applied if `variant="outlined"`.
outlinedPrimary | .og-button-outlined-primary | Styles applied if `variant="outlined"` and `color="primary"`.
outlinedSecondary | .og-button-outlined-secondary | Styles applied if `variant="outlined"` and `color="secondary"`.
outlinedSizeLarge | .og-button-outlined-size-large | Styles applied if `variant="outlined"` and `size="large"`.
outlinedSizeSmall | .og-button-outlined-size-small | Styles applied if `variant="outlined"` and `size="small"`.
sizeLarge | .og-button-size-large | Styles applied if `size="large"`.
sizeSmall | .og-button-size-small | Styles applied if `size="small"`.
startIcon | .og-button-start-icon | Styles applied if a start icon is provided.
text | .og-button-text | Styles applied if `variant="text"`.
textPrimary | .og-button-text-primary | Styles applied if `variant="text"` and `color="primary"`.
textSecondary | .og-button-text-secondary | Styles applied if `variant="text"` and 'color="secondary"`.
textSizeLarge | .og-button-text-size-large | Styles applied if `variant="text"` and `size="large"`.
textSizeSmall | .og-button-text-size-small | Styles applied if `variant="text"` and `size="small"`.