Skip to content

Commit aa1549e

Browse files
naikmubashirnaikmubashir
committed
feat(sistent): create IconButton component overview page with types, sizes, accessibility guidelines
Signed-off-by: Naik Mubashir <naikmubashir095@gmail.com>
1 parent 6bceb11 commit aa1549e

1 file changed

Lines changed: 225 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/iconbutton

‎src/sections/Projects/Sistent/components/iconbutton/index.js‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import {
6+
SistentThemeProvider,
7+
IconButton,
8+
KubernetesIcon,
9+
DesignIcon,
10+
} from "@sistent/sistent";
11+
import { FaHeart } from "@react-icons/all-files/fa/FaHeart";
12+
import { FaEdit } from "@react-icons/all-files/fa/FaEdit";
13+
import { FaTrash } from "@react-icons/all-files/fa/FaTrash";
14+
import { FaSearch } from "@react-icons/all-files/fa/FaSearch";
15+
import TabButton from "../../../../../reusecore/Button";
16+
import { SistentLayout } from "../../sistent-layout";
17+
import { Col, Row } from "../../../../../reusecore/Layout";
18+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
19+
20+
const SistentIconButton = () => {
21+
const location = useLocation();
22+
const { isDark } = useStyledDarkMode();
23+
24+
return (
25+
<SistentLayout title="IconButton">
26+
<div className="content">
27+
<a id="Identity">
28+
<h2>IconButton</h2>
29+
</a>
30+
<p>
31+
IconButton provides an interactive button component that displays only
32+
an icon, ideal for compact UIs where space is limited and actions are
33+
easily recognizable through iconography.
34+
</p>
35+
<div className="filterBtns">
36+
<TabButton
37+
className={
38+
location.pathname === "/projects/sistent/components/iconbutton"
39+
? "active"
40+
: ""
41+
}
42+
onClick={() => navigate("/projects/sistent/components/iconbutton")}
43+
title="Overview"
44+
/>
45+
<TabButton
46+
className={
47+
location.pathname ===
48+
"/projects/sistent/components/iconbutton/guidance"
49+
? "active"
50+
: ""
51+
}
52+
onClick={() =>
53+
navigate("/projects/sistent/components/iconbutton/guidance")
54+
}
55+
title="Guidance"
56+
/>
57+
<TabButton
58+
className={
59+
location.pathname ===
60+
"/projects/sistent/components/iconbutton/code"
61+
? "active"
62+
: ""
63+
}
64+
onClick={() =>
65+
navigate("/projects/sistent/components/iconbutton/code")
66+
}
67+
title="Code"
68+
/>
69+
</div>
70+
<div className="main-content">
71+
<p>
72+
IconButtons are essential components for creating intuitive user
73+
interfaces. They combine the functionality of buttons with the
74+
visual clarity of icons, making them perfect for actions that are
75+
universally understood or where screen real estate is at a premium.
76+
</p>
77+
<a id="Types">
78+
<h2>Types</h2>
79+
</a>
80+
<p>
81+
IconButtons come in different visual styles to establish hierarchy
82+
and accommodate various design needs in your interface.
83+
</p>
84+
<h3>Standard</h3>
85+
<p>
86+
Standard IconButtons provide a subtle interactive area around the
87+
icon with hover and focus states. They're ideal for secondary
88+
actions that don't need strong visual emphasis.
89+
</p>
90+
<Row $Hcenter className="image-container">
91+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
92+
<IconButton aria-label="edit">
93+
<FaEdit />
94+
</IconButton>
95+
</SistentThemeProvider>
96+
</Row>
97+
<h3>With Background Color</h3>
98+
<p>
99+
IconButtons can be styled with background colors to create more
100+
prominent interactive elements while maintaining the compact
101+
icon-only interface.
102+
</p>
103+
<Row $Hcenter className="image-container">
104+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
105+
<IconButton
106+
aria-label="favorite"
107+
sx={{
108+
backgroundColor: "primary.main",
109+
color: "white",
110+
"&:hover": {
111+
backgroundColor: "primary.dark",
112+
},
113+
}}
114+
>
115+
<FaHeart />
116+
</IconButton>
117+
</SistentThemeProvider>
118+
</Row>
119+
<a id="Sizes">
120+
<h2>Sizes</h2>
121+
</a>
122+
<p>
123+
IconButtons support multiple sizes to accommodate different
124+
interface contexts and touch target requirements. The size affects
125+
both the icon and the interactive area around it.
126+
</p>
127+
<h3>Small</h3>
128+
<p>
129+
Small IconButtons (32px) are perfect for dense interfaces, toolbars,
130+
or secondary actions where space is limited.
131+
</p>
132+
<Row $Hcenter className="image-container">
133+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
134+
<IconButton size="small" aria-label="search">
135+
<FaSearch />
136+
</IconButton>
137+
</SistentThemeProvider>
138+
</Row>
139+
<h3>Medium (Default)</h3>
140+
<p>
141+
Medium IconButtons (40px) provide the standard size for most use
142+
cases, offering a good balance between compactness and
143+
accessibility.
144+
</p>
145+
<Row $Hcenter className="image-container">
146+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
147+
<IconButton size="medium" aria-label="edit">
148+
<FaEdit />
149+
</IconButton>
150+
</SistentThemeProvider>
151+
</Row>
152+
<h3>Large</h3>
153+
<p>
154+
Large IconButtons (48px) are ideal for primary actions, mobile
155+
interfaces, or when you need to ensure easy accessibility and touch
156+
interaction.
157+
</p>
158+
<Row $Hcenter className="image-container">
159+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
160+
<IconButton size="large" aria-label="delete">
161+
<FaTrash />
162+
</IconButton>
163+
</SistentThemeProvider>
164+
</Row>
165+
<a id="Icon Integration">
166+
<h2>Icon Integration</h2>
167+
</a>
168+
<p>
169+
IconButtons work seamlessly with various icon libraries and custom
170+
icons. They support React Icons, Material-UI icons, and custom SVG
171+
icons.
172+
</p>
173+
<h3>Using Sistent Icons</h3>
174+
<p>
175+
IconButtons work perfectly with Sistent's built-in icon library,
176+
maintaining design consistency across your application.
177+
</p>
178+
<Row $Hcenter className="image-container">
179+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
180+
<IconButton aria-label="kubernetes">
181+
<KubernetesIcon />
182+
</IconButton>
183+
<IconButton aria-label="design">
184+
<DesignIcon />
185+
</IconButton>
186+
</SistentThemeProvider>
187+
</Row>
188+
<a id="Accessibility">
189+
<h2>Accessibility</h2>
190+
</a>
191+
<p>
192+
IconButtons include built-in accessibility features but require
193+
proper implementation to ensure they're usable by all users.
194+
</p>
195+
<h3>Essential Properties</h3>
196+
<ul>
197+
<li>
198+
<strong>aria-label:</strong> Always provide descriptive labels for
199+
screen readers
200+
</li>
201+
<li>
202+
<strong>Keyboard navigation:</strong> IconButtons are fully
203+
keyboard accessible by default
204+
</li>
205+
<li>
206+
<strong>Focus indicators:</strong> Clear visual focus states for
207+
keyboard users
208+
</li>
209+
<li>
210+
<strong>Touch targets:</strong> Minimum 44px touch targets for
211+
mobile accessibility
212+
</li>
213+
</ul>
214+
<p>
215+
<strong>Best Practice:</strong> When using IconButtons, always
216+
include meaningful aria-labels or aria-labelledby attributes to
217+
describe the action to assistive technologies.
218+
</p>
219+
</div>
220+
</div>
221+
</SistentLayout>
222+
);
223+
};
224+
225+
export default SistentIconButton;

0 commit comments

Comments
 (0)