163 lines
5.2 KiB
Plaintext
163 lines
5.2 KiB
Plaintext
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
|
|
import { Story } from "@/components/Story";
|
|
import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
|
|
import { ButtonDemo } from "./ButtonBlocks/Preview";
|
|
import Examples from "./ButtonBlocks/Examples";
|
|
|
|
# Button
|
|
Displays a button or a component that looks like a button.
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<ButtonDemo />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_COMP_PREVIEW("Button")} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
## Installation
|
|
|
|
1. Create a new file `Button.tsx` in your component folder.
|
|
2. Copy and paste the following code into the file.
|
|
|
|
<LoadedCode from={GITHUB_COMP("Button")} />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Button } from "@components/Button";
|
|
```
|
|
|
|
```html
|
|
<Button>Button</Button>
|
|
```
|
|
|
|
## Props
|
|
|
|
### Variants
|
|
|
|
| Prop | Type | Default | Description |
|
|
|:-------------|:------------------------------------------------------------------------------|:------------|:----------------------------------------|
|
|
| `size` | `"link" \| "sm" \| "md" \| "lg" \| "icon"` | `"md"` | The size of the button |
|
|
| `border` | `"none" \| "solid" \| "success" \| "warning" \| "danger"` | `"solid"` | The border color of the button |
|
|
| `background` | `"default" \| "ghost" \| "success" \| "warning" \| "danger" \| "transparent"` | `"default"` | The background color of the button |
|
|
| `decoration` | `"none" \| "link"` | `"none"` | The inner text decoration of the button |
|
|
| `presets` | `"default" \| "ghost" \| "link" \| "success" \| "warning" \| "danger"` | `"default"` | The preset of the variant props |
|
|
|
|
### Special
|
|
|
|
| Prop | Type | Default | Description |
|
|
|:----------|:----------|:--------|:---------------------------------------------------------|
|
|
| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |
|
|
|
|
## Examples
|
|
|
|
### Default
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Default />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_STORY("Button", "Default")} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Ghost
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Ghost />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_STORY("Button", "Ghost")} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Link
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Link />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_STORY("Button", "Link")} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Success
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Success />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_STORY("Button", "Success")} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Warning
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Warning />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_STORY("Button", "Warning")} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Danger
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Danger />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_STORY("Button", "Danger")} />
|
|
</TabContent>
|
|
</TabProvider>
|