Skip to content

Commit 08cd080

Browse files
paanSinghCoderpaanSinghCoder
authored
Fix/button v1 props (#236)
* fix: maxWidth instead of width * refactor: remove danger and secondary props, rename primary to solid * style: add styles for variants * style: css fixes * chore: remove comment * docs: update mdx * feat: add box shadow * chore: change css * feat: add width prop with style * chore: update mdx
1 parent aee9bc5 commit 08cd080

File tree

4 files changed

+288
-152
lines changed

4 files changed

+288
-152
lines changed

‎apps/www/content/primitives/components/button.mdx‎

Lines changed: 68 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ description: Triggers a click action usually performed by the user to trigger an
55
---
66

77
<Preview>
8-
<Button variant="primary">Primary button</Button>
8+
<Button variant="solid" color="accent">
9+
Solid button
10+
</Button>
911
</Preview>
1012

1113
## Usages
@@ -26,109 +28,132 @@ Import all parts and piece them together.
2628
<LiveEditor code={`
2729
import { Button } from '@raystack/apsara/v1'
2830
29-
<Button variant="primary">Click here!</Button>`} border />
31+
<Button variant="solid" color="accent">Click here!</Button>`} border />
3032
</LiveProvider>
3133

32-
3334
## Props
3435

3536
The `Button` component accepts the following props:
3637

37-
- `variant`: Visual style variant (`"primary"` | `"secondary"` | `"outline"` | `"ghost"` | `"danger"` | `"text"`, default: "primary")
38+
- `variant`: Visual style variant (`"solid"` | `"outline"` | `"ghost"` | `"text"`, default: "solid")
39+
- `color`: Color theme (`"accent"` | `"danger"` | `"neutral"` | `"success"`, default: "accent")
3840
- `size`: Size of the button (`"small"` | `"normal"`, default: "normal")
3941
- `disabled`: Whether the button is disabled (boolean, default: false)
4042
- `loading`: Shows a loading spinner inside the button (boolean)
4143
- `loaderText`: Optional text to display next to the loading spinner (ReactNode)
4244
- `leadingIcon`: Icon element to display before button text (ReactNode)
4345
- `trailingIcon`: Icon element to display after button text (ReactNode)
46+
- `maxWidth`: Custom maximum width for the button (string | number)
4447
- `width`: Custom width for the button (string | number)
4548
- `asChild`: Boolean to merge props onto child element
4649
- `className`: Additional CSS class names
4750
- All other ButtonHTMLAttributes from React
4851

52+
## Variants
4953

50-
## Variant
51-
52-
Variants allow you to customize the button's style, making it visually distinctive and suitable for different purposes. Default is `Primary`.
54+
Variants allow you to customize the button's style, making it visually distinctive and suitable for different purposes. Default is `solid`.
5355

5456
<Playground
5557
scope={{ Button }}
5658
tabs={[
5759
{
58-
name: "Primary",
59-
code: `<Button variant="primary">Primary button</Button>`,
60-
},
61-
{
62-
name: "Secondary",
63-
code: `<Button variant="secondary">Secondary button</Button>`,
60+
name: "Solid",
61+
code: `<Button variant="solid" color="accent">Solid button</Button>`,
6462
},
6563
{
6664
name: "Outline",
67-
code: `<Button variant="outline">Outline button</Button>`,
65+
code: `<Button variant="outline" color="accent">Outline button</Button>`,
6866
},
6967
{
7068
name: "Ghost",
7169
code: `<Button variant="ghost">Ghost button</Button>`,
7270
},
73-
{
74-
name: "Danger",
75-
code: `<Button variant="danger">Danger button</Button>`,
76-
},
7771
{
7872
name: "Text",
7973
code: `<Button variant="text">Text button</Button>`,
8074
},
8175
]}
8276
/>
8377

78+
## Colors
79+
80+
Colors help convey the purpose and importance of actions. The color prop only affects solid and outline variants. Default is `accent`.
81+
82+
<Playground
83+
scope={{ Button }}
84+
tabs={[
85+
{
86+
name: "Accent",
87+
code: `
88+
<div style={{display:'flex', gap: '8px'}}>
89+
<Button variant="solid" color="accent">Solid</Button>
90+
<Button variant="outline" color="accent">Outline</Button>
91+
</div>`,
92+
},
93+
{
94+
name: "Danger",
95+
code: `
96+
<div style={{display:'flex', gap: '8px'}}>
97+
<Button variant="solid" color="danger">Solid</Button>
98+
<Button variant="outline" color="danger">Outline</Button>
99+
</div>`,
100+
},
101+
{
102+
name: "Neutral",
103+
code: `
104+
<div style={{display:'flex', gap: '8px'}}>
105+
<Button variant="solid" color="neutral">Solid</Button>
106+
<Button variant="outline" color="neutral">Outline</Button>
107+
</div>`,
108+
},
109+
{
110+
name: "Success",
111+
code: `
112+
<div style={{display:'flex', gap: '8px'}}>
113+
<Button variant="solid" color="success">Solid</Button>
114+
<Button variant="outline" color="success">Outline</Button>
115+
</div>`,
116+
},
117+
]}
118+
/>
84119

85120
## Scale
86121

87-
The Button component offers two size options to accommodate various design requirements. By selecting the `normal` size, you can create buttons that are visually larger, making it more prominent and noticeable within the user interface. Default size is `normal`.
122+
The Button component offers two size options. Default size is `normal`.
88123

89124
<Playground
90125
scope={{ Button }}
91126
tabs={[
92127
{
93128
name: "Small",
94-
code: `<Button variant="primary" size="small">primary button</Button>`,
129+
code: `<Button variant="solid" color="accent" size="small">Small button</Button>`,
95130
},
96131
{
97132
name: "Normal",
98-
code: `<Button variant="primary" size="normal">primary button</Button>`,
133+
code: `<Button variant="solid" color="accent" size="normal">Normal button</Button>`,
99134
},
100135
]}
101136
/>
102137

103138
## Disabled
104139

105-
The Button component provides a "disabled" state, which prevents the button from responding to any user actions. When a button is disabled, it becomes unclickable and does not trigger any associated actions or events.
106-
107-
This feature is useful when you want to indicate that a button is temporarily inactive or unavailable for interaction. Default is `false`.
140+
The Button component provides a "disabled" state, which prevents the button from responding to any user actions. Default is `false`.
108141

109142
<Playground
110143
scope={{ Button }}
111144
tabs={[
112145
{
113-
name: "Primary",
114-
code: `<Button disabled variant="primary">Primary button</Button>`,
115-
},
116-
{
117-
name: "Secondary",
118-
code: `<Button disabled variant="secondary">Secondary button</Button>`,
146+
name: "Solid",
147+
code: `<Button disabled variant="solid" color="accent">Solid button</Button>`,
119148
},
120149
{
121150
name: "Outline",
122-
code: `<Button disabled variant="outline">Outline button</Button>`,
151+
code: `<Button disabled variant="outline" color="accent">Outline button</Button>`,
123152
},
124153
{
125154
name: "Ghost",
126155
code: `<Button disabled variant="ghost">Ghost button</Button>`,
127156
},
128-
{
129-
name: "Danger",
130-
code: `<Button disabled variant="danger">Danger button</Button>`,
131-
},
132157
{
133158
name: "Text",
134159
code: `<Button disabled variant="text">Text button</Button>`,
@@ -138,32 +163,30 @@ This feature is useful when you want to indicate that a button is temporarily in
138163

139164
## Loading
140165

141-
The Button component offers inbuilt loading states. Loading state is used to signify an ongoing process after the user has clicked on the button. Loading is an optional prop.
142-
143-
Note: A loading as `true` only disables the button click and displays a spinner within the button. `loading` does not changes the button appearance as disabled. For changing the appearance to disabled state, a `disabled` prop as `true` has to passed.
166+
The Button component offers inbuilt loading states. Loading state is used to signify an ongoing process after the user has clicked on the button.
144167

145168
<Playground
146169
scope={{ Button }}
147170
code={`
148171
<div style={{display:'flex', gap: '8px'}}>
149-
<Button variant="primary" loading>Click here</Button>
150-
<Button variant="primary" loading loaderText="Custom Loading...">Click here</Button>
151-
<Button variant="primary" loading loaderText="Loading..." disabled>Click here</Button>
172+
<Button variant="solid" color="accent" loading>Loading</Button>
173+
<Button variant="solid" color="accent" loading loaderText="Custom Loading...">Loading</Button>
174+
<Button variant="solid" color="accent" loading loaderText="Loading..." disabled>Loading</Button>
152175
</div>
153176
`}
154177
/>
155178

156179
## With leading and trailing icons
157180

158-
The button component accepts optional leading and/or trailing icons. A `ReactNode` can be passed as a prop.
181+
The button component accepts optional leading and/or trailing icons.
159182

160183
<Playground
161184
scope={{ Button }}
162185
code={`
163186
<div style={{display:'flex', gap: '8px'}}>
164-
<Button variant="primary" leadingIcon={<>I</>}>With leading icon</Button>
165-
<Button variant="primary" trailingIcon={<>O</>}>With trailing icon</Button>
166-
<Button variant="primary" leadingIcon={<>I</>} trailingIcon={<>O</>}>With both icons</Button>
187+
<Button variant="solid" color="accent" leadingIcon={<>I</>}>With leading icon</Button>
188+
<Button variant="solid" color="accent" trailingIcon={<>O</>}>With trailing icon</Button>
189+
<Button variant="solid" color="accent" leadingIcon={<>I</>} trailingIcon={<>O</>}>With both icons</Button>
167190
</div>
168191
`}
169192
/>

‎apps/www/examples/shield-ts/assets.tsx‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -182,9 +182,44 @@ export const Assets = () => {
182182
<div style={{ padding: "var(--rs-space-5)", width: "100%" }}>
183183
<Flex direction="column" gap="large" style={{ width: "100%" }}>
184184
<Flex direction="column" gap="medium" style={{ width: "100%" }}>
185-
<Flex justify="between" align="center">
186-
<Title>Assets</Title>
187-
<Button>Create Asset</Button>
185+
<Flex direction="column" gap="medium">
186+
<Title>Solid Buttons</Title>
187+
<Flex gap="small" wrap="wrap">
188+
<Button variant="solid" color="accent">solid-accent</Button>
189+
<Button variant="solid" color="danger">solid-danger</Button>
190+
<Button variant="solid" color="neutral">solid-neutral</Button>
191+
<Button variant="solid" color="success">solid-success</Button>
192+
</Flex>
193+
194+
<Title>Outline Buttons</Title>
195+
<Flex gap="small" wrap="wrap">
196+
<Button variant="outline" color="accent">outline-accent</Button>
197+
<Button variant="outline" color="danger">outline-danger</Button>
198+
<Button variant="outline" color="neutral">outline-neutral</Button>
199+
<Button variant="outline" color="success">outline-success</Button>
200+
</Flex>
201+
202+
<Title>Ghost & Text Buttons</Title>
203+
<Flex gap="small" wrap="wrap">
204+
<Button variant="ghost">ghost</Button>
205+
<Button variant="text">text</Button>
206+
</Flex>
207+
208+
<Title>Loading State</Title>
209+
<Flex gap="small" wrap="wrap">
210+
<Button variant="solid" color="accent" loading>Loading</Button>
211+
<Button variant="outline" color="accent" loading>Loading</Button>
212+
<Button variant="ghost" loading>Loading</Button>
213+
<Button variant="text" loading>Loading</Button>
214+
</Flex>
215+
216+
<Title>Disabled State</Title>
217+
<Flex gap="small" wrap="wrap">
218+
<Button variant="solid" color="accent" disabled>Disabled</Button>
219+
<Button variant="outline" color="accent" disabled>Disabled</Button>
220+
<Button variant="ghost" disabled>Disabled</Button>
221+
<Button variant="text" disabled>Disabled</Button>
222+
</Flex>
188223
</Flex>
189224

190225
<InputField
@@ -257,7 +292,7 @@ const AssetsHeader = () => {
257292
style={{ width: "100%", padding: "4px", paddingTop: "48px" }}
258293
>
259294
<Flex gap="extra-large" align="center" style={{ width: "100%" }}>
260-
<Search
295+
<Search
261296
placeholder="Search assets..."
262297
value={searchValue}
263298
onChange={(e) => setSearchValue(e.target.value)}

0 commit comments

Comments
 (0)