80 lines
1.5 KiB
Plaintext
80 lines
1.5 KiB
Plaintext
---
|
|
title: Input Button
|
|
description: A button that shows an input when clicked.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="input-button-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="input-button" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<InputButton>
|
|
<Buttons>
|
|
<Button>Button</Button>
|
|
<SubmitButton>Submit</SubmitButton>
|
|
</Buttons>
|
|
<Input />
|
|
</InputButton>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Newsletter Form with Loading State
|
|
|
|
<ComponentPreview name="input-button-loading-demo" />
|
|
|
|
## Props
|
|
|
|
### InputButton
|
|
|
|
<TypeTable
|
|
type={{
|
|
transition: {
|
|
description: 'The transition of the component',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: "{ type: 'spring', stiffness: 300, damping: 20 }",
|
|
},
|
|
showInput: {
|
|
description: 'Whether to show the input',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
setShowInput: {
|
|
description: 'The function to set the showInput state',
|
|
type: 'React.Dispatch<React.SetStateAction<boolean>>',
|
|
required: false,
|
|
},
|
|
id: {
|
|
description: 'The id of the component',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### SubmitButton
|
|
|
|
<TypeTable
|
|
type={{
|
|
icon: {
|
|
description: 'The icon of the component',
|
|
type: 'React.ElementType',
|
|
required: false,
|
|
default: 'ArrowRight',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- Credits to [Adam Wathan](https://x.com/adamwathan/status/1890105358519341205) for the inspiration
|