Igor Octaviano
ef163cd702
* Use path instead of alias * Add missing pacakges * Use path in viewers * Use path in contextProviders * Add base to config * Add conditionals for window * Copy config to avoid breaking build * Update and lock versions * Update lock file * Remove scaling config * Fix broken versions of react date * Fix broken dev
445 lines
9.9 KiB
Plaintext
445 lines
9.9 KiB
Plaintext
---
|
|
name: Button
|
|
menu: General
|
|
route: components/button
|
|
---
|
|
|
|
import { Playground, Props } from 'docz';
|
|
import { Button, IconButton, Icon } from '../';
|
|
|
|
# Button
|
|
|
|
Buttons are used to execute actions when users interacts with them.
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { Button } from '@ohif/ui';
|
|
```
|
|
|
|
## Outlined Buttons
|
|
|
|
<Playground>
|
|
<div className="p-4">
|
|
<Button variant="outlined" className="m-1">
|
|
Default
|
|
</Button>
|
|
<Button variant="outlined" color="primary" className="m-1">
|
|
Primary
|
|
</Button>
|
|
<Button variant="outlined" color="secondary" className="m-1">
|
|
Secondary
|
|
</Button>
|
|
<Button variant="outlined" color="white" className="m-1">
|
|
White
|
|
</Button>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Contained Buttons
|
|
|
|
<Playground>
|
|
<div className="p-4">
|
|
<Button variant="contained" className="m-1">
|
|
Default
|
|
</Button>
|
|
<Button variant="contained" color="primary" className="m-1">
|
|
Primary
|
|
</Button>
|
|
<Button variant="contained" color="secondary" className="m-1">
|
|
Secondary
|
|
</Button>
|
|
<Button variant="contained" color="white" className="m-1">
|
|
White
|
|
</Button>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Text Buttons
|
|
|
|
<Playground>
|
|
<div className="p-4">
|
|
<Button variant="text" className="m-1">
|
|
Default
|
|
</Button>
|
|
<Button variant="text" color="primary" className="m-1">
|
|
Primary
|
|
</Button>
|
|
<Button variant="text" color="secondary" className="m-1">
|
|
Secondary
|
|
</Button>
|
|
<Button variant="text" color="white" className="m-1">
|
|
White
|
|
</Button>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Rounded Buttons
|
|
|
|
<Playground>
|
|
<div className="p-4">
|
|
<div className="mb-2">
|
|
<Button variant="contained" rounded="none" className="m-1">
|
|
Non Rounded
|
|
</Button>
|
|
<Button variant="contained" rounded="small" className="m-1">
|
|
Small Rounded
|
|
</Button>
|
|
<Button variant="contained" rounded="medium" className="m-1">
|
|
Medium Rounded
|
|
</Button>
|
|
<Button variant="contained" rounded="large" className="m-1">
|
|
Large Rounded
|
|
</Button>
|
|
<Button variant="contained" rounded="full" className="m-1">
|
|
Full Rounded
|
|
</Button>
|
|
</div>
|
|
<div className="mb-2">
|
|
<Button
|
|
variant="contained"
|
|
rounded="none"
|
|
color="primary"
|
|
className="m-1"
|
|
>
|
|
Non Rounded
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
rounded="small"
|
|
color="primary"
|
|
className="m-1"
|
|
>
|
|
Small Rounded
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
rounded="medium"
|
|
color="primary"
|
|
className="m-1"
|
|
>
|
|
Medium Rounded
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
rounded="large"
|
|
color="primary"
|
|
className="m-1"
|
|
>
|
|
Large Rounded
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
rounded="full"
|
|
color="primary"
|
|
className="m-1"
|
|
>
|
|
Full Rounded
|
|
</Button>
|
|
</div>
|
|
<div className="mb-2">
|
|
<Button
|
|
variant="contained"
|
|
rounded="none"
|
|
color="secondary"
|
|
className="m-1"
|
|
>
|
|
Non Rounded
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
rounded="small"
|
|
color="secondary"
|
|
className="m-1"
|
|
>
|
|
Small Rounded
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
rounded="medium"
|
|
color="secondary"
|
|
className="m-1"
|
|
>
|
|
Medium Rounded
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
rounded="large"
|
|
color="secondary"
|
|
className="m-1"
|
|
>
|
|
Large Rounded
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
rounded="full"
|
|
color="secondary"
|
|
className="m-1"
|
|
>
|
|
Full Rounded
|
|
</Button>
|
|
</div>
|
|
<div className="mb-2">
|
|
<Button variant="contained" rounded="none" color="white" className="m-1">
|
|
Non Rounded
|
|
</Button>
|
|
<Button variant="contained" rounded="small" color="white" className="m-1">
|
|
Small Rounded
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
rounded="medium"
|
|
color="white"
|
|
className="m-1"
|
|
>
|
|
Medium Rounded
|
|
</Button>
|
|
<Button variant="contained" rounded="large" color="white" className="m-1">
|
|
Large Rounded
|
|
</Button>
|
|
<Button variant="contained" rounded="full" color="white" className="m-1">
|
|
Full Rounded
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Sizes
|
|
|
|
<Playground>
|
|
<div className="p-4">
|
|
<div>
|
|
<Button variant="contained" size="small" className="m-1">
|
|
Small
|
|
</Button>
|
|
<Button variant="contained" size="medium" className="m-1">
|
|
Medium
|
|
</Button>
|
|
<Button variant="contained" size="large" className="m-1">
|
|
Large
|
|
</Button>
|
|
</div>
|
|
<div>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
color="primary"
|
|
className="m-1"
|
|
>
|
|
Small
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
size="medium"
|
|
color="primary"
|
|
className="m-1"
|
|
>
|
|
Medium
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
size="large"
|
|
color="primary"
|
|
className="m-1"
|
|
>
|
|
Large
|
|
</Button>
|
|
</div>
|
|
<div>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
color="secondary"
|
|
className="m-1"
|
|
>
|
|
Small
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
size="medium"
|
|
color="secondary"
|
|
className="m-1"
|
|
>
|
|
Medium
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
size="large"
|
|
color="secondary"
|
|
className="m-1"
|
|
>
|
|
Large
|
|
</Button>
|
|
</div>
|
|
<div>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
color="white"
|
|
className="m-1"
|
|
>
|
|
Small
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
size="medium"
|
|
color="white"
|
|
className="m-1"
|
|
>
|
|
Medium
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
size="large"
|
|
color="white"
|
|
className="m-1"
|
|
>
|
|
Large
|
|
</Button>
|
|
</div>
|
|
|
|
</div>
|
|
</Playground>
|
|
|
|
## Buttons with icons
|
|
|
|
<Playground>
|
|
<div className="p-4 flex">
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
className="m-1"
|
|
startIcon={<Icon name="settings" />}
|
|
>
|
|
Settings
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
className="m-1"
|
|
endIcon={<Icon name="settings" />}
|
|
>
|
|
Download
|
|
</Button>
|
|
<Button
|
|
variant="outlined"
|
|
rounded="full"
|
|
color="default"
|
|
className="m-1"
|
|
endIcon={<Icon name="settings" />}
|
|
>
|
|
Download
|
|
</Button>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Icon Buttons
|
|
|
|
Icon buttons are generally used in toolbars.
|
|
|
|
```javascript
|
|
import { IconButton } from '@ohif/ui';
|
|
```
|
|
|
|
<Playground>
|
|
<div className="p-4 flex flex-col items-center">
|
|
<div className="">
|
|
<IconButton className="m-2">
|
|
<Icon name="settings" />
|
|
</IconButton>
|
|
<IconButton className="m-2" variant="text">
|
|
<Icon name="settings" />
|
|
</IconButton>
|
|
<IconButton className="m-2" variant="outlined">
|
|
<Icon name="settings" />
|
|
</IconButton>
|
|
</div>
|
|
<div>
|
|
<IconButton className="m-2" color="primary">
|
|
<Icon name="launch-arrow" />
|
|
</IconButton>
|
|
<IconButton className="m-2" color="primary" variant="text">
|
|
<Icon name="launch-arrow" />
|
|
</IconButton>
|
|
<IconButton className="m-2" color="primary" variant="outlined">
|
|
<Icon name="launch-arrow" />
|
|
</IconButton>
|
|
</div>
|
|
<div>
|
|
<IconButton className="m-2" color="secondary">
|
|
<Icon name="cancel" />
|
|
</IconButton>
|
|
<IconButton className="m-2" color="secondary" variant="text">
|
|
<Icon name="cancel" />
|
|
</IconButton>
|
|
<IconButton className="m-2" color="secondary" variant="outlined">
|
|
<Icon name="cancel" />
|
|
</IconButton>
|
|
</div>
|
|
<div>
|
|
<IconButton className="m-2" color="white">
|
|
<Icon name="settings" />
|
|
</IconButton>
|
|
<IconButton className="m-2" variant="text" color="white">
|
|
<Icon name="launch-arrow" />
|
|
</IconButton>
|
|
<IconButton className="m-2" variant="outlined" color="white">
|
|
<Icon name="cancel" />
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
</Playground>
|
|
|
|
<Playground>
|
|
<div className="p-4">
|
|
<div className="">
|
|
<IconButton className="m-2">
|
|
<Icon name="settings" />
|
|
</IconButton>
|
|
<IconButton className="m-2" variant="outlined">
|
|
<Icon name="settings" />
|
|
</IconButton>
|
|
<IconButton className="m-2" variant="text">
|
|
<Icon name="settings" />
|
|
</IconButton>
|
|
</div>
|
|
<div>
|
|
<IconButton className="m-2" color="primary">
|
|
<Icon name="launch-arrow" />
|
|
</IconButton>
|
|
<IconButton className="m-2" color="primary" variant="text">
|
|
<Icon name="launch-arrow" />
|
|
</IconButton>
|
|
<IconButton className="m-2" color="primary" variant="outlined">
|
|
<Icon name="launch-arrow" />
|
|
</IconButton>
|
|
</div>
|
|
<div>
|
|
<IconButton className="m-2" color="secondary">
|
|
<Icon name="cancel" />
|
|
</IconButton>
|
|
<IconButton className="m-2" color="secondary" variant="text">
|
|
<Icon name="cancel" />
|
|
</IconButton>
|
|
<IconButton className="m-2" color="secondary" variant="outlined">
|
|
<Icon name="cancel" />
|
|
</IconButton>
|
|
</div>
|
|
<div>
|
|
<IconButton className="m-2" color="white">
|
|
<Icon name="settings" />
|
|
</IconButton>
|
|
<IconButton className="m-2" variant="text" color="white">
|
|
<Icon name="launch-arrow" />
|
|
</IconButton>
|
|
<IconButton className="m-2" variant="outlined" color="white">
|
|
<Icon name="cancel" />
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Properties
|
|
|
|
<Props of={Button} />
|