Skip to content

Commit 3a6c722

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
guidance
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent f033fef commit 3a6c722

1 file changed

Lines changed: 248 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/badge

‎src/sections/Projects/Sistent/components/badge/guidance.js‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { Row } from "../../../../../reusecore/Layout";
5+
import { Badge, SistentThemeProvider, Avatar } from "@sistent/sistent";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import MailIcon from "@mui/icons-material/Mail";
8+
import NotificationsIcon from "@mui/icons-material/Notifications";
9+
10+
import TabButton from "../../../../../reusecore/Button";
11+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
12+
13+
const BadgeGuidance = () => {
14+
const location = useLocation();
15+
const { isDark } = useStyledDarkMode();
16+
17+
return (
18+
<SistentLayout title="Badge">
19+
<div className="content">
20+
<a id="Identity">
21+
<h2>Badge</h2>
22+
</a>
23+
<p>
24+
A badge is a small piece of information that is used to convey a
25+
specific message or status. It is often used to provide additional
26+
context or information about an item, such as a notification count,
27+
status indicator, or label.
28+
</p>
29+
<div className="filterBtns">
30+
<TabButton
31+
className={
32+
location.pathname === "/projects/sistent/components/badge"
33+
? "active"
34+
: ""
35+
}
36+
onClick={() => navigate("/projects/sistent/components/badge")}
37+
title="Overview"
38+
/>
39+
<TabButton
40+
className={
41+
location.pathname ===
42+
"/projects/sistent/components/badge/guidance"
43+
? "active"
44+
: ""
45+
}
46+
onClick={() =>
47+
navigate("/projects/sistent/components/badge/guidance")
48+
}
49+
title="Guidance"
50+
/>
51+
<TabButton
52+
className={
53+
location.pathname === "/projects/sistent/components/badge/code"
54+
? "active"
55+
: ""
56+
}
57+
onClick={() => navigate("/projects/sistent/components/badge/code")}
58+
title="Code"
59+
/>
60+
</div>
61+
<div className="main-content">
62+
<p>
63+
For proper application, badges should be used consistently
64+
throughout the user interface to maintain clarity and user
65+
understanding.
66+
</p>
67+
<a id="Function">
68+
<h2>Function</h2>
69+
</a>
70+
<p>
71+
The function of badges determines how they should be used in
72+
different scenarios to provide users with additional context or
73+
information.
74+
</p>
75+
<h3>Notification Badge</h3>
76+
<p>
77+
Notification badges are commonly used to display counts of unread
78+
messages, alerts, or notifications. They typically appear as small
79+
circular indicators with numbers and are positioned at the top-right
80+
corner of icons, buttons, or user avatars.
81+
</p>
82+
<Row $Hcenter className="image-container">
83+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
84+
<Badge badgeContent={4} color="primary">
85+
<NotificationsIcon />
86+
</Badge>
87+
</SistentThemeProvider>
88+
</Row>
89+
<h3>Status Badge</h3>
90+
<p>
91+
Status badges indicate the current state of an item or user. They
92+
can show whether a user is online/offline, if a service is
93+
active/inactive, or if a process is pending/completed. Status badges
94+
often use color coding to convey meaning, such as green for "online"
95+
or red for "error."
96+
</p>
97+
<Row $Hcenter className="image-container">
98+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
99+
<Avatar>
100+
<Badge
101+
overlap="circular"
102+
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
103+
variant="dot"
104+
color="success"
105+
>
106+
U
107+
</Badge>
108+
</Avatar>
109+
</SistentThemeProvider>
110+
</Row>
111+
<h3>Label Badge</h3>
112+
<p>
113+
Label badges categorize or tag elements in the interface. They might
114+
indicate features like "New," "Premium," or "Beta" to highlight
115+
special characteristics of an item. These badges are often
116+
rectangular and contain text rather than just a number or dot.
117+
</p>
118+
<Row $Hcenter className="image-container">
119+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
120+
<div
121+
style={{
122+
position: "relative",
123+
display: "inline-block",
124+
padding: "10px",
125+
border: "1px solid #ccc",
126+
}}
127+
>
128+
<div
129+
style={{ position: "absolute", top: "-10px", right: "-10px" }}
130+
>
131+
<Badge
132+
badgeContent="NEW"
133+
color="primary"
134+
sx={{ padding: "0 8px" }}
135+
/>
136+
</div>
137+
Feature Item
138+
</div>
139+
</SistentThemeProvider>
140+
</Row>
141+
142+
<a id="Color Usage">
143+
<h2>Color Usage</h2>
144+
</a>
145+
<p>
146+
Colors play a crucial role in communicating the meaning and
147+
importance of badges. Using consistent color patterns helps users
148+
quickly understand the information being presented.
149+
</p>
150+
<h3>Primary Color</h3>
151+
<p>
152+
Primary color badges are typically used for standard notifications
153+
or counts that don't have a specific urgency level.
154+
</p>
155+
<Row $Hcenter className="image-container">
156+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
157+
<Badge badgeContent={4} color="primary">
158+
<MailIcon />
159+
</Badge>
160+
</SistentThemeProvider>
161+
</Row>
162+
<h3>Secondary Color</h3>
163+
<p>
164+
Secondary color badges can be used to differentiate between
165+
different types of notifications or to create visual hierarchy.
166+
</p>
167+
<Row $Hcenter className="image-container">
168+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
169+
<Badge badgeContent={4} color="secondary">
170+
<MailIcon />
171+
</Badge>
172+
</SistentThemeProvider>
173+
</Row>
174+
<h3>Error Color</h3>
175+
<p>
176+
Error color badges (typically red) indicate important notifications
177+
that require immediate attention or critical status information.
178+
</p>
179+
<Row $Hcenter className="image-container">
180+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
181+
<Badge badgeContent={4} color="error">
182+
<MailIcon />
183+
</Badge>
184+
</SistentThemeProvider>
185+
</Row>
186+
<h3>Warning Color</h3>
187+
<p>
188+
Warning color badges (typically yellow/orange) indicate
189+
notifications or status that requires attention but isn't critical.
190+
</p>
191+
<Row $Hcenter className="image-container">
192+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
193+
<Badge badgeContent={4} color="warning">
194+
<MailIcon />
195+
</Badge>
196+
</SistentThemeProvider>
197+
</Row>
198+
<h3>Success Color</h3>
199+
<p>
200+
Success color badges (typically green) indicate positive status or
201+
completed actions.
202+
</p>
203+
<Row $Hcenter className="image-container">
204+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
205+
<Badge badgeContent={4} color="success">
206+
<MailIcon />
207+
</Badge>
208+
</SistentThemeProvider>
209+
</Row>
210+
211+
<a id="Best Practices">
212+
<h2>Best Practices</h2>
213+
</a>
214+
<p>
215+
When using badges in your interface, consider these guidelines to
216+
ensure they're effective and user-friendly:
217+
</p>
218+
<ul>
219+
<li>
220+
<strong>Keep it Simple:</strong> Badges should be concise and only
221+
display essential information. For notification counts, consider
222+
using "99+" for large numbers to save space.
223+
</li>
224+
<li>
225+
<strong>Consistent Positioning:</strong> Place badges in
226+
consistent locations relative to their parent elements to create a
227+
predictable pattern for users.
228+
</li>
229+
<li>
230+
<strong>Use Color Meaningfully:</strong> Choose badge colors
231+
purposefully to convey information about priority or status.
232+
</li>
233+
<li>
234+
<strong>Ensure Visibility:</strong> Make sure badges have
235+
sufficient contrast against their background to be easily visible.
236+
</li>
237+
<li>
238+
<strong>Avoid Overuse:</strong> Too many badges can create visual
239+
noise. Use them sparingly for important information only.
240+
</li>
241+
</ul>
242+
</div>
243+
</div>
244+
</SistentLayout>
245+
);
246+
};
247+
248+
export default BadgeGuidance;

0 commit comments

Comments
 (0)