91 lines
1.5 KiB
Plaintext
91 lines
1.5 KiB
Plaintext
---
|
|
name: Button
|
|
---
|
|
|
|
import { Playground, PropsTable } from 'docz'
|
|
|
|
import { Button } from './button.js'
|
|
import { DoczWrapper } from '../theme.js'
|
|
|
|
# Button
|
|
|
|
<PropsTable of={Button} />
|
|
|
|
## Primary
|
|
|
|
<Playground>
|
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
|
<DoczWrapper>
|
|
{() => (
|
|
<Button
|
|
label='Click me!'
|
|
onClick={() => alert('Clicked')}
|
|
/>
|
|
)}
|
|
</DoczWrapper>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Secondary
|
|
|
|
<Playground>
|
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
|
<DoczWrapper>
|
|
{() => (
|
|
<Button
|
|
label='Click me!'
|
|
onClick={() => alert('Clicked')}
|
|
variant='secondary'
|
|
/>
|
|
)}
|
|
</DoczWrapper>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Primary Disabled
|
|
|
|
<Playground>
|
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
|
<DoczWrapper>
|
|
{() => (
|
|
<Button
|
|
label='Cannot click'
|
|
disabled
|
|
/>
|
|
)}
|
|
</DoczWrapper>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Secondary Disabled
|
|
|
|
<Playground>
|
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
|
<DoczWrapper>
|
|
{() => (
|
|
<Button
|
|
label='Cannot click'
|
|
disabled
|
|
variant='secondary'
|
|
/>
|
|
)}
|
|
</DoczWrapper>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Link Button
|
|
|
|
<Playground>
|
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
|
<DoczWrapper>
|
|
{() => (
|
|
<Button
|
|
label='Click me!'
|
|
isLink
|
|
to='/my-route'
|
|
/>
|
|
)}
|
|
</DoczWrapper>
|
|
</div>
|
|
</Playground>
|