Skip to content

Commit 4ad4dc3

Browse files
author
Kapil Gowru
committed
fix: endpoint snippets mapping
1 parent 47b41bf commit 4ad4dc3

File tree

3 files changed

+1140
-1001
lines changed

3 files changed

+1140
-1001
lines changed

fern/products/docs/docs.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ navigation:
2525
- page: Aside
2626
path: ./pages/component-library/default-components/aside.mdx
2727
icon: fa-regular fa-comment-dots
28+
- page: Button
29+
path: ./pages/component-library/default-components/buttons.mdx
30+
icon: fa-regular fa-button
2831
- page: Callouts
2932
path: ./pages/component-library/default-components/callouts.mdx
3033
icon: fa-regular fa-exclamation-triangle
@@ -43,12 +46,15 @@ navigation:
4346
- page: Endpoint Request Snippet
4447
path: ./pages/component-library/default-components/endpoint-request-snippet.mdx
4548
icon: fa-regular fa-arrow-up
49+
slug: request-snippet
4650
- page: Endpoint Response Snippet
4751
path: ./pages/component-library/default-components/endpoint-response-snippet.mdx
4852
icon: fa-regular fa-arrow-down
53+
slug: response-snippet
4954
- page: Endpoint Schema Snippet
5055
path: ./pages/component-library/default-components/endpoint-schema-snippet.mdx
5156
icon: fa-regular fa-sitemap
57+
slug: schema-snippet
5258
- page: Frames
5359
path: ./pages/component-library/default-components/frames.mdx
5460
icon: fa-regular fa-window-maximize
Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
title: 'Button'
3+
description: 'Interactive button component with multiple variants and intents'
4+
---
5+
6+
The `Button` component provides a flexible way to create interactive buttons with various styles, sizes, and intents.
7+
8+
## Example
9+
10+
<Tabs>
11+
<Tab title="Example">
12+
<div className="space-y-4">
13+
<div className="space-x-2">
14+
<Button intent="primary">Primary Button</Button>
15+
<Button intent="success">Success Button</Button>
16+
<Button intent="warning">Warning Button</Button>
17+
<Button intent="danger">Danger Button</Button>
18+
</div>
19+
20+
<div className="space-x-2">
21+
<Button outlined>Outlined Button</Button>
22+
<Button minimal>Minimal Button</Button>
23+
</div>
24+
25+
<div className="space-x-2">
26+
<Button small>Small Button</Button>
27+
<Button>Normal Button</Button>
28+
<Button large>Large Button</Button>
29+
</div>
30+
31+
<div className="space-x-2">
32+
<Button icon="download">Download</Button>
33+
<Button rightIcon="arrow-right">Continue</Button>
34+
<Button icon="star" rightIcon="arrow-right">Favorite</Button>
35+
</div>
36+
37+
<div className="space-x-2">
38+
<Button href="/docs">Link Button</Button>
39+
<Button disabled>Disabled Button</Button>
40+
</div>
41+
</div>
42+
</Tab>
43+
<Tab title="Markdown">
44+
```jsx
45+
<div className="space-y-4">
46+
<div className="space-x-2">
47+
<Button intent="primary">Primary Button</Button>
48+
<Button intent="success">Success Button</Button>
49+
<Button intent="warning">Warning Button</Button>
50+
<Button intent="danger">Danger Button</Button>
51+
</div>
52+
53+
<div className="space-x-2">
54+
<Button outlined>Outlined Button</Button>
55+
<Button minimal>Minimal Button</Button>
56+
</div>
57+
58+
<div className="space-x-2">
59+
<Button small>Small Button</Button>
60+
<Button>Normal Button</Button>
61+
<Button large>Large Button</Button>
62+
</div>
63+
64+
<div className="space-x-2">
65+
<Button icon="download">Download</Button>
66+
<Button rightIcon="arrow-right">Continue</Button>
67+
<Button icon="star" rightIcon="arrow-right">Favorite</Button>
68+
</div>
69+
70+
<div className="space-x-2">
71+
<Button href="/docs">Link Button</Button>
72+
<Button disabled>Disabled Button</Button>
73+
</div>
74+
</div>
75+
```
76+
</Tab>
77+
</Tabs>
78+
79+
## Properties
80+
81+
### Basic
82+
83+
<ParamField path="intent" type="'none' | 'primary' | 'success' | 'warning' | 'danger'" required={false} default="'none'">
84+
The visual intent of the button
85+
</ParamField>
86+
87+
<ParamField path="disabled" type="boolean" required={false} default="false">
88+
Whether the button is disabled
89+
</ParamField>
90+
91+
<ParamField path="small" type="boolean" required={false} default="false">
92+
Whether to use small size
93+
</ParamField>
94+
95+
<ParamField path="large" type="boolean" required={false} default="false">
96+
Whether to use large size
97+
</ParamField>
98+
99+
<ParamField path="icon" type="string | ReactNode" required={false}>
100+
Icon to display on the left side
101+
</ParamField>
102+
103+
<ParamField path="href" type="string" required={false}>
104+
URL to navigate to (renders as link button)
105+
</ParamField>
106+
107+
### Advanced
108+
109+
<ParamField path="minimal" type="boolean" required={false} default="false">
110+
Whether to use minimal styling
111+
</ParamField>
112+
113+
<ParamField path="outlined" type="boolean" required={false} default="false">
114+
Whether to use outlined styling
115+
</ParamField>
116+
117+
<ParamField path="full" type="boolean" required={false} default="false">
118+
Whether the button should take full width
119+
</ParamField>
120+
121+
<ParamField path="rounded" type="boolean" required={false} default="false">
122+
Whether to use rounded corners
123+
</ParamField>
124+
125+
<ParamField path="active" type="boolean" required={false} default="false">
126+
Whether the button is in active state
127+
</ParamField>
128+
129+
<ParamField path="mono" type="boolean" required={false} default="false">
130+
Whether to use monospace font
131+
</ParamField>
132+
133+
<ParamField path="rightIcon" type="string | ReactNode" required={false}>
134+
Icon to display on the right side
135+
</ParamField>
136+
137+
<ParamField path="text" type="ReactNode" required={false}>
138+
The button text content
139+
</ParamField>
140+
141+
<ParamField path="className" type="string" required={false}>
142+
Additional CSS classes
143+
</ParamField>

0 commit comments

Comments
 (0)