Gallery
Share
Explore

Berkoukes props

Last edited 157 days ago by System Writer

Atoms ⚛️


Avatar

⁠
Story
⁠
⁠
⁠
Figma
⁠
⁠
An avatar is a graphical representation of a user or entity, usually displayed as a small image or icon. In a design system, the avatar component would typically be a reusable UI element that displays a user's profile picture or initials.
The avatar component can be used in a variety of contexts, such as in a user profile section, in a comment thread, or next to a user's name in a messaging app. The avatar component should be designed to be flexible enough to accommodate different types of content, such as images, icons, or text, and should be responsive to different screen sizes.
Avatar props
Name
Type
Description
Default
1
shape
​
Avatar's shape "circle";"square"
"circle"
2
size
string
Avatar's size "XXXS";"XXS";"XS";"S";"M";"L";"XL";"XXL"
"XXL"
3
type
​
"text";"image";"avatar"
"avatar"
4
letter
string
Letter to display in case Avatar's type is text
string
​
5
src
string
Image source in case Avatar's type is image
string
​
There are no rows in this table
⁠

Avatar Group

⁠
Story
⁠
⁠
⁠
Figma
⁠
⁠
An avatar group is similar to an avatar component, but it displays a small group of avatars together in a single UI element. The avatar group component is typically used in contexts where multiple users are involved, such as in a group chat, a project collaboration tool, or a team management application.
The avatar group component can be used in a variety of ways, such as in a list view, a detail view, or in a navigation menu. The avatar group component should be designed to be flexible enough to accommodate different numbers of avatars, and should be responsive to different screen sizes.
Avatar Group props
Name
Type
Description
Default
1
number
​
Number of avatars in the group
"5”
2
size
string
“XS”;”S”;”M”
“M”
There are no rows in this table
⁠

Badges

⁠
Story
⁠
⁠
⁠
Figma
⁠
⁠
Badges and tags are small UI elements that are used to label or categorize content, such as articles, products, or users. The badge component typically displays a short text label or icon, while the tag component displays a longer text label.
Badges props
Name
Type
Description
Default
1
type
​
"Filled";"Outline"
"Outline"
2
variant
BadgesVariants
"Outline";"Accent";"Error";"Warning";"Success";"Neutral"
"Outline"
There are no rows in this table
⁠

Breadcrumbs

Story
⁠
Figma
⁠
⁠
A breadcrumb is a type of navigation element that displays the user's current location within a hierarchy of pages or content. The breadcrumb component typically appears near the top of a page and displays a series of links, each representing a step in the user's navigation path.
Breadcrumbs props
Name
Type
Description
Default
1
children
ReactNode
​
null
2
href
string
The URL the breadcrumb routes to.
null
There are no rows in this table
⁠

Buttons

⁠
Story
⁠
⁠
⁠
Figma
⁠
⁠
A button is a common UI element used to trigger an action or submit a form. The button component can have various styles, shapes, and sizes depending on the design system and the context in which it will be used.
Buttons props
Name
Type
Description
Default
1
children*
ReactNode
Custom content for the button
"Outline"
2
variant
ButtonsVariants
"primary";"secondary";"borders";"no-borders";"destructive";"success";"text-primary";"text-secondary";"text-destructive"
"primary"
3
size
string
Size of the button "normal""small"
​
4
disabled
boolean
Disabled state “boolean”
​
There are no rows in this table
⁠

Checkbox

Story
⁠
Figma
⁠
⁠
A checkbox is a UI element that allows the user to select one or more options from a set of choices. The checkbox component typically consists of a small square box that can be checked or unchecked, and a label describing the option.
Table
Name
Type
Description
Default
1
size
string
Size of the checkboxes “normal”;”small”
“normal”
2
active
boolean
Active or not? “True”,”False”
“False”
3
state
​
"Default”;”Hover”;”Focused”;”Disabled”
"Default”
There are no rows in this table
⁠

Tabs

Story
⁠
Figma
⁠
⁠
A tab is a UI element that allows the user to navigate between multiple pages or views within a single container. The tab component typically consists of a series of clickable labels or icons, each representing a different view or page.
Tabs props
Name
Type
Description
Default
1
current
boolean
Is it current or not? “True”;”False”
“True”
2
type
​
“Primary”;”Underline”
“Primary”
3
Fullwidth
boolean
Is it full width or not? “True”;”False”
“True”
4
Text
string
Text inside the tab
​
There are no rows in this table
⁠
Tabs Item props
Name
Type
Description
Default
1
type
​
“Primary”;”Underline”
“Primary”
2
Fullwidth
boolean
Is it full width or not? “True”;”False”
“True”
There are no rows in this table
⁠

Tags

Story
⁠
Figma
⁠
⁠
Badges and tags are small UI elements that are used to label or categorize content, such as articles, products, or users. The badge component typically displays a short text label or icon, while the tag component displays a longer text label.
Tags props
Name
Type
Description
Default
1
type
​
"Filled”;”Outline”
"Outline”
2
variant
TagsVariants
“Accent”;”Outline”;”Error”;”Warning”;”Success”
"Outline”
There are no rows in this table
⁠

Toggle

Story
⁠
Figma
⁠
⁠
A toggle is a UI element that allows the user to switch between two states, such as on/off or enabled/disabled. The toggle component typically consists of a switch that can be moved back and forth between two positions, and a label describing the current state.
Toggle props
Name
Type
Description
Default
1
state
​
“Default”;”Hover”;”Focus”;”Disabled”
“Default”
2
active
boolean
Is it active width or not? “True”;”False”
“True”
There are no rows in this table
⁠

Moleculs 🧬


Divider

Story
⁠
Figma
⁠
⁠
A Divider component is a horizontal line used in design systems to visually separate sections of content or to indicate a break in a sequence of elements. It improves the visual hierarchy and aesthetics of a user interface by creating clear separations and reducing visual clutter.
Divider props
Name
Type
Description
Default
1
type
​
“Large Text”;“Divider”
"Divider”
There are no rows in this table
⁠

Dropdowns

Story
⁠
Figma
⁠
⁠
A Dropdown component is a UI element that presents a list of predefined options when the user interacts with a button or field. It allows for easy selection of options, ensures consistency, and can save space on the interface.
Dropdowns
Name
Type
Description
Default
1
type
​
"Simple”;”Avatar”
"Simple”
2
showFooter
boolean
Do we display the footer or not? “True”;”False
"True”
There are no rows in this table
⁠

Inputs

Story
⁠
Figma
⁠
⁠
An Input component is a UI element that allows users to enter and submit data. It includes a field for typing information and a label or placeholder text. Inputs are essential for interaction and can improve the user experience and design consistency.
Inputs select props
Name
Type
Description
Default
1
type
​
“Basic”;”Two Fields”;”Tag”;”Dropdown”
“Basic”
2
state
​
"Default”;”Entered”;Active”;”Disabled”;”Error”
“Default”
There are no rows in this table
⁠

Inputs text props
Name
Type
Description
Default
1
state
​
"Default”;”Entered”;Active”;”Disabled”;”Error”
“Default”
There are no rows in this table
⁠
Inputs paragraph props
Name
Type
Description
Default
1
state
​
“Error”;”Null”;”Entered”;”Focused”;”Disabled”
"Null”
There are no rows in this table
⁠

Inputs search props
Name
Type
Description
Default
1
state
​
"Default”;”Entered”;”Active”;”Error”
“Default”
There are no rows in this table
⁠
Inputs verification items props
Name
Type
Description
Default
1
type
​
"Default”;”Entered”;”Active”;”Error”;”Divider”
“Default”
There are no rows in this table
⁠

Pagination

Story
⁠
Figma
⁠
⁠
A Pagination component is a UI element used to navigate through a large amount of content. It typically consists of numbered buttons and helps to improve the user experience and reduce page load times.
Pagination items props
Name
Type
Description
Default
1
type
​
"Default”;”Selected”;”Hover”
"Default”
There are no rows in this table
⁠
Pagination props
Name
Type
Description
Default
1
type
​
“Row+txt”
“Row+txt”
There are no rows in this table
⁠

Progress

Story
⁠
Figma
⁠
⁠
A Progress component is a UI element used to show the completion status of a task or process. It typically consists of a bar or circle that fills up gradually and helps to improve the user experience.
Progress props
Name
Type
Description
Default
1
type
​
"0%”;”50%”;”100%”
“0%”
There are no rows in this table
⁠

Progress Indicator (stepper)

Story
⁠
Figma
⁠
⁠
A Progress Indicator component is a UI element used to show the progress of a longer task or process through a sequence of highlighted steps. It helps to reduce confusion and improve the user experience.
Steps props
Name
Type
Description
Default
1
type
​
“Default”;”Active”;”Check”
"Default”
There are no rows in this table
⁠
Stepper props 2
Name
Type
Description
Default
1
Orientation
string
"Vertical”
“Vertical”
There are no rows in this table
⁠

Toast

Story
⁠
Figma
⁠
⁠
A Toast component is a UI element used to display brief, contextual messages in a small popup window. It helps to improve the user experience by providing timely information without interrupting the workflow.
Toast props
Name
Type
Description
Default
1
color
​
“Neutral”;”Success”;”Warning”;”Error”
“Neutral”
2
size
string
“Large”;”Medium”
"Medium”
There are no rows in this table
⁠

Organisms 🫀


Upload

Story
⁠
Figma
⁠
⁠
An Upload component is a UI element used for selecting and uploading files to a website or application. It includes a button or link to open a file browser dialog and a progress bar to indicate upload status. It helps improve usability by simplifying the file sharing process and providing feedback to users.
Upload items props
Name
Type
Description
Default
1
state
string
“Pending”;”In Progress”;”Ready to download”;”Failed”
​
There are no rows in this table
⁠
Upload container props
Name
Type
Description
Default
1
state
​
“Default”;”Hover”;”With a File”;”Disabled
“Default”
There are no rows in this table
⁠
Upload modal props
Name
Type
Description
Default
1
type
​
“Active”;”Inactive”
“Inactive”
There are no rows in this table
⁠

Page Headers

Story
⁠
Figma
⁠
⁠
A Page Headers component is a UI element used to provide a consistent header across multiple pages or sections of a website or application.
Page Headers props
Name
Type
Description
Default
1
type
​
“User left”
“User left”
There are no rows in this table
⁠

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.