Skip to content

Commit d907a8a

Browse files
Shrinks99Shrinks99
authored
Add navigation button style (#62)
1 parent e89f430 commit d907a8a

4 files changed

Lines changed: 126 additions & 54 deletions

File tree

‎packages/demo/src/content/components/button.mdx‎

Lines changed: 119 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,33 @@ description: "Button with sizes and variants"
66

77
import React from "react";
88
import { Button } from "@eqtylab/equality";
9-
import { ArrowUp, Grid3X3 } from "lucide-react";
9+
import { ArrowUp, Grid3X3, ArrowRight } from "lucide-react";
1010

11-
## Primary (default)
11+
## Overview
12+
13+
Buttons are interactive elements that trigger actions when clicked. They are used for form submissions, dialogs, and other user interactions where the user performs an action.
14+
15+
## Usage
16+
17+
Import the component:
18+
19+
```ts
20+
import { Button } from "@eqtylab/equality";
21+
```
22+
23+
Basic usage with required properties:
24+
25+
```tsx
26+
<Button>Click me</Button>
27+
```
28+
29+
## Variants
30+
31+
The Button component supports multiple visual variants to communicate different levels of emphasis and intent.
32+
33+
### Primary
34+
35+
As the default variant, the `primary` variant is used for main call-to-action buttons and intended next steps.
1236

1337
{
1438

@@ -25,7 +49,9 @@ import { ArrowUp, Grid3X3 } from "lucide-react";
2549
</div>
2650
}
2751

28-
## Secondary
52+
### Secondary
53+
54+
Use the `secondary` variant to call out actions that are of secondary importance in comparison to a primary action.
2955

3056
{
3157

@@ -42,7 +68,9 @@ import { ArrowUp, Grid3X3 } from "lucide-react";
4268
</div>
4369
}
4470

45-
## Tertiary
71+
### Tertiary
72+
73+
Use the `tertiary` variant for most other lower-emphasis actions.
4674

4775
{
4876

@@ -59,24 +87,28 @@ import { ArrowUp, Grid3X3 } from "lucide-react";
5987
</div>
6088
}
6189

62-
## Danger
90+
### Danger
91+
92+
Use the `danger` variant For destructive actions like delete or remove.
6393

6494
{
6595

6696
<div className="flex gap-2">
6797
<Button variant="danger" size="lg">
68-
danger LG
98+
Danger LG
6999
</Button>
70100
<Button variant="danger" size="md">
71-
danger MD
101+
Danger MD
72102
</Button>
73103
<Button variant="danger" size="sm">
74-
danger SM
104+
Danger SM
75105
</Button>
76106
</div>
77107
}
78108

79-
## Link
109+
### Link
110+
111+
Use the `link` variant for buttons that should be styled as a link but with button semantics.
80112

81113
{
82114

@@ -93,7 +125,32 @@ import { ArrowUp, Grid3X3 } from "lucide-react";
93125
</div>
94126
}
95127

96-
## With Prefix Icon
128+
### Navigation
129+
130+
Use the `navigation` variant for navigation elements that require button styling. These should only be used for navigation and never for form actions like "next" or "previous".
131+
132+
{(() => {
133+
const arrowRight = React.createElement(ArrowRight);
134+
return (
135+
136+
<div className="flex gap-2">
137+
<Button variant="navigation" size="lg" suffix={arrowRight}>
138+
Navigation LG
139+
</Button>
140+
<Button variant="navigation" size="md" suffix={arrowRight}>
141+
Navigation MD
142+
</Button>
143+
<Button variant="navigation" size="sm" suffix={arrowRight}>
144+
Navigation SM
145+
</Button>
146+
</div>
147+
); })()}
148+
149+
## Icons
150+
151+
Buttons can display icons before or after the label using the `prefix` and `suffix` props.
152+
153+
### With Prefix Icon
97154

98155
{(() => {
99156
const prefixIcon = React.createElement(Grid3X3);
@@ -112,7 +169,7 @@ return (
112169
</div>
113170
); })()}
114171

115-
## With Suffix Icon
172+
### With Suffix Icon
116173

117174
{(() => {
118175
const suffixIcon = React.createElement(ArrowUp);
@@ -131,61 +188,70 @@ return (
131188
</div>
132189
); })()}
133190

134-
## As Link
191+
### Usage
135192

136-
{
193+
```tsx
194+
import { ArrowRight, Grid3X3 } from 'lucide-react';
137195

138-
<div className="flex gap-2">
139-
<Button variant="primary" size="lg" href="https://example.com">
140-
Link LG
141-
</Button>
142-
<Button variant="primary" size="md" href="https://example.com">
143-
Link MD
144-
</Button>
145-
<Button variant="primary" size="sm" href="https://example.com">
146-
Link SM
147-
</Button>
148-
</div>
149-
}
196+
<Button prefix={<Grid3X3 />}>With Prefix</Button>
197+
<Button suffix={<ArrowRight />}>With Suffix</Button>
198+
```
150199

151-
## As Link with Target
200+
## As a Link
152201

153-
{
202+
When an `href` prop is provided, buttons render as an anchor elements while maintaining their styling. This should be used in favor of `onClick` events when using buttons for navigation.
154203

155-
<div className="flex gap-2">
156-
<Button
157-
variant="secondary"
158-
size="md"
159-
href="https://example.com"
160-
target="_blank"
161-
rel="noopener noreferrer"
162-
>
163-
Open in New Tab
164-
</Button>
165-
<Button
166-
variant="tertiary"
167-
size="md"
168-
href="https://example.com/file.pdf"
169-
download
170-
>
171-
Download File
172-
</Button>
173-
</div>
174-
}
204+
Button also accepts common HTML link-related properties such as `target`, and `download`.
205+
206+
```tsx
207+
<Button href="https://example.com" target="_blank">New Tab Link Button</Button>
208+
<Button href="https://example.com/file.pdf" download>Link Button</Button>
209+
```
175210

176211
## Disabled
177212

213+
Buttons tagged with the `disabled` property are non-interactive and visually muted.
214+
178215
{
179216

180217
<div className="flex gap-2">
181-
<Button variant="primary" size="lg" disabled>
182-
Disabled LG
218+
<Button variant="primary" size="sm" disabled>
219+
Disabled Primary
183220
</Button>
184-
<Button variant="primary" size="md" disabled>
185-
Disabled MD
221+
<Button variant="secondary" size="sm" disabled>
222+
Disabled Secondary
186223
</Button>
187-
<Button variant="primary" size="sm" disabled>
188-
Disabled SM
224+
<Button variant="tertiary" size="sm" disabled>
225+
Disabled Tertiary
226+
</Button>
227+
<Button variant="danger" size="sm" disabled>
228+
Disabled Danger
229+
</Button>
230+
<Button variant="navigation" size="sm" disabled>
231+
Disabled Navigation
189232
</Button>
190233
</div>
191234
}
235+
236+
## Slots
237+
238+
| Name | Description |
239+
| ---------- | ----------------------------------------------- |
240+
| `children` | The button label content |
241+
| `prefix` | Content displayed before the label (e.g., icon) |
242+
| `suffix` | Content displayed after the label (e.g., icon) |
243+
244+
## Props
245+
246+
| Name | Description | Type | Default | Required |
247+
| ---------- | ------------------------------------------------ | ------------------------------------------------------------------ | --------- | -------- |
248+
| `variant` | The visual style of the button | `primary`, `secondary`, `tertiary`, `danger`, `link`, `navigation` | `primary` | ❌ |
249+
| `size` | The size of the button | `sm`, `md`, `lg` | `md` | ❌ |
250+
| `prefix` | Content to display before the button label | `ReactNode` | - | ❌ |
251+
| `suffix` | Content to display after the button label | `ReactNode` | - | ❌ |
252+
| `href` | URL for link buttons (renders as anchor element) | `string` | - | ❌ |
253+
| `target` | Link target (when href is provided) | `string` | - | ❌ |
254+
| `rel` | Link rel attribute (when href is provided) | `string` | - | ❌ |
255+
| `download` | Makes link downloadable (when href is provided) | `string`, `boolean` | - | ❌ |
256+
| `asChild` | Merge props onto child element | `boolean` | `false` | ❌ |
257+
| `disabled` | Disables the button | `boolean` | `false` | ❌ |

‎packages/ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@eqtylab/equality",
33
"description": "EQTYLab's component and token-based design system",
44
"homepage": "https://equality.eqtylab.io/",
5-
"version": "1.0.2",
5+
"version": "1.1.0",
66
"license": "Apache-2.0",
77
"keywords": [
88
"component library",

‎packages/ui/src/components/button/button.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@
5050
@apply hover:not-disabled:text-mixed-light;
5151
}
5252

53+
.button--navigation {
54+
@apply text-text-link;
55+
@apply not-disabled:hover:bg-lilac-400/25 not-disabled:hover:text-lilac-800 not-disabled:dark:hover:bg-lilac-500/25 not-disabled:dark:hover:text-lilac-200;
56+
}
57+
5358
.size--sm {
5459
@apply text-xs;
5560
}

‎packages/ui/src/components/button/button.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const buttonVariants = cva(styles['button'], {
1313
secondary: styles['button--secondary'],
1414
tertiary: styles['button--tertiary'],
1515
link: styles['button--link'],
16+
navigation: styles['button--navigation'],
1617
},
1718
size: {
1819
sm: styles['size--sm'],

0 commit comments

Comments
 (0)