# Buttons
## Contained Button

**File Name:** ContainedButton.tsx

**Imports:**
- Contained Button from Material-UI: [Contained Button Doc](https://material-ui.com/components/buttons/#contained-buttons)
- Button from '@material-ui/core/Button': [Button API](https://material-ui.com/api/button/#button-api)

**Example:** 
- Login
- Save
- Cancel 
- Delete 
- Select Time Slot
- Approve
- Reset Password
- Delete User
- New

**Description:** 
- Pages: 
    - Login
    - Create Schedule
    - Edit Schedule
    - Create Time Slot
    - Edit Time Slot
    - Create Skill
    - Create Position
    - Create/Edit User

- The contained button will be used to submit input.

- It will also be used for navigational purposes in the nav bar, menu, and profile.

**I/O:** 
- Clicking the button will do the action it's labeled with. 
- Ex. clicking sign in on the login page will sign you in if credentials are valid.

**Code Example**

```typescript
import React from 'react';
import Button from '@material-ui/core/Button';

export default function ContainedButton(props: any)
{

    return (
        <div>
            <Button variant="contained" color="primary">{props.name}</Button>
        </div>
    )
}
```

<img src="../../images/components/Contained-Button.png" width="500"/>

## Icon Button

**File Name:** IconButton.tsx

**Imports:**
- Icon Button from Material-UI: [Icon Button Doc](https://material-ui.com/components/buttons/#icon-buttons)
- IconButton from '@material-ui/core/IconButton': [IconButton API](https://material-ui.com/api/icon-button/#iconbutton-api)

**Example:** 
- Copy Schedule Icon 
- Edit Schedule Icon
- Edit Skills Icon
- Edit Positions Icon
- View/Hide Notes Icon

**Description:** 

Pages: 
- Daily Roster page
- Manage Schedules page
- Manage Seniority page
- Select Time Slot page
- Manage Skills page
- Manage Positions page

<!-- TODO: Add examples of how it would behave for each instance -->
- The icon button represents the action related to the icon.

**I/O:** 

- Clicking the icon button will do the action it represents. 
- Ex. clicking the copy icon button will take you to the Edit Schedule page with information from the copied schedule duplicated and editable.

**Code Example**
<!-- TODO: Implement examples for other icons -->
```typescript
import React from 'react';
import FileCopyIcon from '@material-ui/icons/FileCopy';
import IconButton from '@material-ui/core/IconButton';

export default function IconButton()
{
    return(
      <div>
          <IconButton aria-label="copy" color="primary">
              <FileCopyIcon />
          </IconButton>
      </div>
    )
}
```

<img src="../../images/components/Icon-Button.png" width="300"/>

## Floating Action Button

**File Name:** Fab.tsx

**Imports:**
- Floating Action Button from Material-UI: [Floating Action Button Doc](https://material-ui.com/components/floating-action-button/)
- Fab from '@material-ui/core/Fab': [Fab API](https://material-ui.com/api/fab/#fab-api)
- AddIcon from '@material-ui/icons/Add': [Material Icons](https://material-ui.com/components/material-icons/#material-icons)

**Example:** 
- Add User Button

**Description:** 
- Pages:
    - Manage Skills page
    - Manage Positions page
    - Manage Shifts page
    - Manage Schedules page
    - Manage Seniority page
    - Create Schedule page
    - Edit Schedule page

- The floating action button will be used as a "create" action to add users in manage users page. 
- It stays above all other elements on the page.

**I/O:** 
- Clicking the floating action button will do the action related to the page it's on. 
- Ex. clicking the "plus" floating button in the manage users page will navigate to the create/edit user page.

**Example Code**

```typescript
import React from 'react';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';

export default function Fab() {

    return(
        <div>
            <Fab color="primary" aria-label="add">
                <AddIcon />
            <Fab/>
        </div>
    )
}
```

<img src="../../images/components/Floating-Action-Button.png" width="400"/>