Gallery
Design System Manager
Share
Explore
Gallery
Design System Manager
Databases

icon picker
Component Database

This page houses the Component Database, which serves as the foundation for all other views of the components. I encourage you to familiarize yourself with every column, every formula, and how the tables are interrelated. To understand these connections, simply click on the link icon next to the title of the table.
Here's what you'll find on this page:
⁠
Component Dependencies
⁠
: This section illustrates how a specific component utilizes other components to function. This visualization of interdependencies is invaluable for understanding the interconnectedness of your design system.
⁠
Component Props
⁠
: Here, we list all the properties (or "props") associated with each component. Alignment between design and engineering is crucial, so feel free to modify the data to suit your team's needs.
⁠
Component Variants
⁠
: This is primarily relevant to design teams. In Figma, we use component sets and variants to visualize different states of a component. This approach is unique to Figma, and thus, this section may not directly correlate with engineering perspectives. Nonetheless, feel free to adjust and connect your components here and document them.
⁠
Component References
⁠
: This section is reserved for any links you'd like to include in your design system documentation, specifically related to a component. These references are displayed on the components page, providing additional context and resources.

After understanding the
Component Database
⁠
, your next stop should be the
Components
⁠
page. The Component pages transforms structured data into a visual, interactive format. This up-to-date, flexible interface serves as a vital, adaptable part of your design system documentation. Be sure to explore its features ⭐️
Components Database
Name
Open Documentation
Overview Description
Usage Description
Best Practices
Do’s and Don’ts
Content guidelines
Accessibility Guidelines
Content Page
Design Component
Design Component Set
Design Preview
Code Component
Dependencies
Jira Ticket
Status
1
Toggle Switch
Open Documentation
The Toggle Switch is an interactive UI element that allows users to switch between two states, typically on/off or true/false.
Toggle switches are used when there are only two states for a user to choose from and the results are immediate upon toggling. They are commonly used in settings or preferences to enable or disable features.
Clearly label toggle switches to avoid confusion about what feature or functionality they control.
Do's
Labeling: Clearly label the switch and the states it controls. The labels should describe the action that will occur when the switch is toggled. For example, a switch controlling notifications might be labeled "Notifications" with states "On" and "Off".
Accessible Name: The accessible name should convey the same meaning as the visual label, and should also indicate the current state of the switch. This could be achieved by using aria-checked="true" or aria-checked="false".
Toggle Switch
​
C.A - Toggle Switches [In Progress]
components-toggle--default
C.A - Knobs
​
In Progress
2
Links
Open Documentation
Links are clickable text elements that lead users to a different page or section within the application or an external website.
Links are essential for navigation, allowing users to traverse different sections of the website, application, or even external resources. They typically appear as underlined text and often have a color distinct from the surrounding text to make them stand out.
Ensure that links have clear, descriptive text that indicates where the link will take the user.
Do's
Clear: Make the link text meaningful. Avoid using generic text like "click here". The text should describe what the user will find when they click the link.
Color Contrast: Ensure the color of the link text has sufficient contrast against its background to help visually impaired users distinguish it.
Links
C.A - Links / Secondary onLoad
​
components-link--default
​
Secondary v.0.1
Released
3
Sliders
Open Documentation
Sliders allow users to select a value or range from a set of options by moving an indicator, providing a dynamic and interactive interface element.
Sliders are primarily used for adjusting a setting or specifying a value along a specific range. They are ideal for options where users might want to select a value in a continuum, such as volume, brightness, or color hue. Sliders can be either horizontal or vertical, with horizontal being the most common orientation.
Always label sliders to inform users about what they are selecting.

Do's

Labels should be brief and clearly describe the value or range being adjusted.
Ensure the slider is keyboard accessible; it should be operable using arrow keys.
Sliders
C.M - Sliders / Volume
​
components-slider--default
C.A - Knobs
C.M - Sliders
Open
4
Checkbox
Open Documentation
A Checkbox is a graphical user interface element that allows users to select one or more options from a list.

Usage description for Checkbox

Best Practices for Checkbox

DesignSystemGPT's Do's and Don'ts for Checkbox



​
C.O - Selectors / Data Selector
C.A - Toggle Switches [In Progress]
​
​
​
In Progress
5
Search Bar
Open Documentation


Usage Description for Search Bar

Best Practices for Search Bar

Do's and Don'ts for Search Bar



​
​
C.M - List Items
​
​
​
In Progress
There are no rows in this table
⁠

Component Dependencies
Component
Design Dependency
Code Dependency
Notes
Dependency Preview
Toggle Switch
1
C.A - Knobs
​
Used only within toggle switch and sliders
C.A - Knobs
Sliders
1
C.A - Knobs
​
Used only within toggle switch and sliders
C.A - Knobs
⁠
Component Props
Name
Prop Title
Prop Type
Description
Code
Toggle Switch
3
isDisabled
boolean
If the toggle is disabled or not. This prevents any interaction.
​
onBlur
function
Handler to be called when toggle is unfocused.
function(
event,
analyticsEvent
) => undefined
size
union
Toggle size.
One of<
"regular",
"large"
>
Links
4
href
string
Link to another page.
​
target
string
Where to display the linked URL, see anchor information on mdn for more information.
​
rel
string
The relationship of the linked URL as space-separated link types. Generally you'll want to set this to "noopener noreferrer" when target is "_blank".
​
iconBefore
node
Element to render before the item text. Generally should be an icon component.
React.ReactNode
Sliders
2
defaultValue
number
Sets the default value if range is not set.
​
isDisabled
boolean
Sets whether the field range is disabled
​
⁠
Component Variants
Component
Notes
Design Variation
Thumbnail Url
Toggle Switch
2
Off state for Toggle Switch
Type=Off
On state for Toggle Switch
Type=On
⁠
Component References
Reference
Component
⁠

Components Database
Component Dependencies
Component Props
Component Variants
Component References
Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.