# Glide Components Documentation ## Avatar Avatar is a visual element, often a small image or icon, that represents a user, character, or profile in a digital application, website, or platform. ### props: - label (String/Element) - Used to render icon or text elements inside the Avatar if src is not set. This can be an element, or just a string. - onClick (Function) - Action to be performed when clicked - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. ## Badge Badges are often small graphical elements that convey information in a compact and visually appealing way. ### props: - children (Element) - The badge will be added relative to this node. - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - badgeClass - Override or extend the badge styles applied to the component. - badgeStyle - The system prop that allows defining system overrides as well as additional CSS styles for badge. - label (String) - The content rendered within the badge. - onClick (Function) - Action to be performed when clicked ## Breadcrumbs Breadcrumbs typically appear near the top of a webpage and display a trail of links, each representing a page or section that the user has traversed to reach the current page. ### props: - children (Element) - The breadcrumbs will be added relative to this node. - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - separator - Custom separator node. - labelStyle - The system prop that allows defining system overrides as well as additional CSS styles for breadcrumbs label. - containerStyle - The system prop that allows defining system overrides as well as additional CSS styles for root element. - iconStyle - The system prop that allows defining system overrides as well as additional CSS styles for the seperator. ## Button Button is a user interface element that users can interact with to trigger an action or event within a web application or website ### props: - children (Element) - The button will be added relative to this node. - loading (Bool) - If true, the button content will be displayed with loading symbol - icon (Element) - Element placed after the children. - disabled (Bool) - If true, the component is disabled. - variant (string)- The variant to use. - Type: 'contained' | 'outlined' | 'text' - onClick (Function) - Action to be performed when clicked - style - The system prop that allows defining system overrides as well as additional CSS styles. - iconPosition (String)- Position of the icon to be placed inside button.Default will be on left side of the label. - color (String) - The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. - ColorType: 'primary' | 'secondary' - loadingIcon (Element) - icon to be displayed when loading is true. - size (String)- The size of the component. - Sizes: 'small' | 'medium' | 'large' - className - Override or extend the styles applied to the component. - containerStyle - The system prop that allows defining system overrides as well as additional CSS styles for root element. - buttonContentClass - The system prop that allows defining system overrides as well as additional CSS styles for root element labels. ## Card Cards are often used to organize and display various types of content, such as text, images, buttons, and other elements, in a consistent and modular format. ### props: - children (Element) - The card will be added relative to this node. - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. ## Checkbox Checkboxes are commonly used in forms and interfaces where users need to make selections or express preferences. ### props: - className - Override or extend the styles applied to the component. - style - The system prop that allows defining system overrides as well as additional CSS styles. - onClick (Function) - performs check / unchecks - disabled (Bool) - If true, the component is disabled. - label (String) - Used to render text elements inside the Checkbox. - containerClass - Override or extend the styles applied to the component for root element. - containerStyle -The system prop that allows defining system overrides as well as additional CSS styles for root element. - checked (Bool) - used to inform if the checkbox is checked or not. ## Chip Chips are often used to display tags, categories, filters, or selected options in a visually appealing and compact manner. ### props: - type (string) - type of chip to use. - types: 'success' | 'warning' | 'info' | 'error' | 'disable' - children (Element) - The chip will be added relative to this node. - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. ## Divider A divider is a visual element used to separate content and create a clear visual break between different sections or components within a user interface ### props: - className - Override or extend the styles applied to the component. - style - The system prop that allows defining system overrides as well as additional CSS styles. ## Drawer a "drawer" is a UI component that slides in or out from the edge of the screen to reveal additional content or options. ### props: - className - Override or extend the styles applied to the component. - style - The system prop that allows defining system overrides as well as additional CSS styles. - position (String) - Side from which the drawer will appear. - default - "right" - Type: 'bottom' | 'left' | 'right' | 'top' - onClose (Function) -Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose. - open (Bool)- If true, the component is shown. - Default - true - children (Element) - The drawer content will be added relative to this node. - paperClass - Override or extend the styles applied to the root component. - paperStyle - Styles applied to the root element. ## ProgressCircle A ProgressCircle, often referred to as a "loading spinner" or "loading animation," is a visual element used to indicate that a process is in progress or that content is being loaded ### props: - color (String) - The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. - size (String)- The size of the component. - Sizes: 'small' | 'medium' | 'large' - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - containerClass - Override or extend the styles applied to the root component. ## Menu A menu that displays a list of options when activated, usually by clicking or hovering over a trigger element. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - open (bool) - enables or disables the menu. - onClose (Function) -Callback fired when the component requests to be closed. - position (String) - postion where the list of options to be displayed. - default - "bottom" - positions - "bottom" | "top" | "topLeft" | "topRight" | "bottomRight" | "bottomLeft" - children (Element) - Menu contents, normally MenuItems. - anchorEl (Element)- An HTML element that returns one. It's used to set the position of the menu. ## MenuItem A "menuItem" is a user interface element that represents an item or option within a menu. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - icon (Element) - Element placed with the children. - iconPosition (String)- Position of the icon to be placed inside button.Default will be on left side of the label. - children (Element/String) - Menu contents. - onClick (Function) - Action to be performed when clicked - value (String) - value of the menu content - containerStyle - Override or extend the styles applied to the root component. - containerClass - Override or extend the styles applied to the root component. ## Modal A modal, also known as a modal dialog or modal window, is a UI component that appears on top of the main content of a web page to temporarily capture the user's attention and require interaction. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - open (bool) - If true, the modal component is shown. - onClose (Function) -Callback fired when the component requests to be closed. - children (Element) - The Modal contents will be added relative to this node. - containerStyle - Override or extend the styles applied to the root component. - containerClass - Override or extend the styles applied to the root component. ## ModalTitle Modal Title is like a header of the modal. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - children (Element) - The Modal Title contents will be added relative to this node. - onClick (Function) - Action to be performed when clicked ## ModalContent Modal content is like a body of the modal. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - children (Element) - The Modal content contents will be added relative to this node. ## ModalActions Modal actions is like a footer of the modal. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - children (Element) - The Modal Action contents will be added relative to this node. ## NavbarLayout A navbar, short for navigation bar, is a common user interface component in web development that provides a way for users to navigate and access various sections or features of a website or application. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - children (Element) - The navbar contents will be added relative to this node. - size (String) - Defines the height of the navbar - Sizes: 'small' | 'medium' | 'large' - position (String) - This normal CSS position property - navbarContainerStyle - Override or extend the styles applied to the root component. ## Pagination Pagination allows users to navigate through the content by viewing one page at a time, making it easier to consume and navigate through a long list of items. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - onChange (Function) - function used to nagivate back or front. - page (String) - current page the user is in. starts from 1. - count (String) - Total page count. - color (String) - customize the color of the current page pagination component color. - containerClass - Override or extend the styles applied to the root component. ## Select A "select" element, often referred to as a dropdown or a select box. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - children (Element) - The option elements to populate the select with. - value (String) -The input value. Providing an empty string will select no options. Set to an empty string '' if you don't want any of the available options to be selected. If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected. - onChange (Function) - Callback fired when a option is selected. - disabled (Bool) - if true, the select options will not be diplayed - size (String) - Defines the height of the navbar - Sizes: 'small' | 'medium' | 'large' ## Skeleton Skeletons are used to visualize the overall layout and structure of a page before adding the actual content and styling. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - variant (String) - The type of content that will be rendered. - default: "rectangular" - variants: "circle" | "rectangular" - width (Number/String) - Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. - height (Number/String) - Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. ## Snackbar A "snackbar" is a small, transient notification typically displayed near the bottom or top of a user interface to provide brief messages or updates to the user. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - open (Bool) - If true, the component is shown. - message (Element/String) - The message to display. - autoHideDuration (Number) - The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar. This behavior is disabled by default with the null value. (default = 3000) - type (string) - type of snackbar to use. - types: 'success' | 'warning' | 'info' | 'error' - position (String) - The position of the Snackbar. -default position : "top-center" - positions : "top-center" | "top-left" | "top-right" | "bottom-center" | "bottom-left" | "bottom-right" - onClose (Function) - Callback fired when the component requests to be closed. ## Stepper A "stepper" is a UI component used to guide users through a series of steps or stages in a process. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - children (Element) - stepper contents, normally step component. - flexDirection (String) - direction of the stepper should appear. - default direction : "column" - directions : "column" | "row" - activeIndex (String) - indicates currently the step is user in. ## Step A "step" typically refers to an individual stage or phase within a stepper ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - children (Element) - stepper contents, normally step component. - flexDirection (String) - direction of the step should appear. - directions : "column" | "row" - label (Element/String) - The component to render in place of the StepLabel. - stepLabel (Element/String) - The component to render in place of the StepIcon. - onClick (Function) - Action to be performed when clicked - completedLabel (Element/String) - if the step is completed, the user can specify what to be render in stepLabel.(default: tick icon is displayed) - completed (String) - indicates whether the step is completed or not. - stepIconStyle - Override or extend the styles applied to the step icon component. - stepLabelStyle - Override or extend the styles applied to the step label component. - stepLabelClassName - Override or extend the styles applied to the step label component - stepIconClassName - Override or extend the styles applied to the step icon component - disabled (Bool) - if true, the step will not be clickable. - active (String) - indicates the step is active step in stepper or not. - flexDirection (String) - direction of the step should appear. - directions : "column" | "row" ## Table A "table" is an HTML element used to display tabular data in a structured format, typically consisting of rows and columns. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - columns (Array) - columns of the table. - label (String) - label to be rendered in the column - fieldName (String) - when the sorting icon is clicked by default the label will be send in sortHandler function. if user wishes to get anyother that can be passed as fieldName. - sort (Bool) - if true, the sorting icon will be rendered. - style - Can override the column td by passing style in it. - type (String) - type of data to be rendered in that specific column. - types : 'chip' | 'link' | 'element' - customBodyRenderer (function) - returns customized element by overriding the default td styles. - data (Array) - data to be rendered. - sortHandler (Function) - performs sorting actions. - sortItem (String) - column that is sorted. - sortOrder (String) - order in which the column is sorted. - tableRowStyles - The system prop that allows defining system overrides as well as additional CSS styles for tableRow. - tableHeaderStyle - The system prop that allows defining system overrides as well as additional CSS styles for tableHeader. - linkHandler (Function) - performs link action. - actionHandler (Function) - if element is passed in columns and performs the action. - loading (Bool) - If true, the table content will be displayed with loading symbol - chipStyle - Override or extend the styles applied to the chip component. - progressCircleStyle - The system prop that allows defining system overrides as well as additional CSS styles for progressCircle when loading. - progressCircleClass - Override or extend the styles applied to the progresscircle component. - progressCircleContainerClass - Override or extend the styles applied to the progresscircle root component. - message (String) - message to be rendered in place of data when data is empty array. - tableContainerStyle - The system prop that allows defining system overrides as well as additional CSS styles for table root. - containerClass - Override or extend the styles applied to the table root component. ## Tab Tabs are often displayed horizontally or vertically and allow users to switch between different sections or views of content without navigating to a new page. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - children (Element) - stepper contents, normally step component. - className - Override or extend the styles applied to the component. - indicatorStyle (String) - variants for the tab - default indicatorStyle - "simple" - "bottomLine" | "simple" - activeIndex (Number) - specifies current tab. default = 0 - onTabChange (Function) - Action to be performed when tab clicked - iconPosition (String)- Position of the icon to be placed inside button.Default will be on left side of the label. - positions: "start" | "end" - disabled (Bool) - If true, the component is disabled. - containerClass - Override or extend the styles applied to the table root component. ## Text Use text to present your design and content as clearly and efficiently as possible. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - children (Element) - stepper contents, normally step component. - className - Override or extend the styles applied to the component. - type (String) - Applies the theme text styles. - default : 14px - types: "h1" | "h2" | "h3" - onClick (Function) - Action to be performed ## Textfield A "textfield" refers to a specific type of form element used to accept text input from users. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - children (Element) - stepper contents, normally step component. - className - Override or extend the styles applied to the component. - type (string) - HTML input types. default - "text" - onChange (Function) - Callback fired when a option is selected. - value (String) - string to be rendered inside textfield. - placeholder (String) - string to be rendered when there is no value. - disabled (bool) - if true, it restricts from typing. - size (Number/String)- The size of the component. - Sizes: 'small' | 'medium' | 'large' - icon (Element/String) - icon to be rendered inside the text field. - iconPosition (String)- Position of the icon to be placed inside textfield.Default will be on right side. - width (string/Number) - textfield width property. default - "340px" - required (Bool) - input default required property. - textFieldStyle - The system prop that allows defining textfield system overrides as well as additional CSS styles. - containerClass - Override or extend the styles applied to the root component. ## Accordion An "accordion" is a user interface component used to display content in a collapsible or expandable manner. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - children (Element) - paragraph contents, normally p tag contents. - title (String/Element) -This props allows user can set title for the content - titleStyle - The system prop that allows defining system overrides as well as additional CSS styles for title. ## IconButton Icon button is a graphical user interface element that typically represents a small clickable icon or button. IconButton is used to trigger specific actions or functions when clicked by the user. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - src (Element) - Icon to be rendered. - variant (String)- The variant of the component. - variants: 'small' | 'medium' | 'large' - iconStyle - The system prop that allows defining system overrides as well as additional CSS styles for icon. ## PhoneNumber A "PhoneNumber" typically refers to a data input field or form element that allows users to enter their phone number. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - countryCodeStyle - The system prop that allows defining system overrides as well as additional CSS styles for country code. - setPhoneNumber(Element) - A function to update the phone number value. - required (Bool) - input default required property. - value {String/Number} - The current value of the phone number input. ## RadioButton RadioButton is a type of graphical user interface (GUI) element or form input control that allows users to select one option from a list of mutually exclusive choices. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - disabled (Bool) - If "true", the radio button is disabled. - size (String)- The size of the component. - sizes: 'small' | 'medium' | 'large' - children (string|ReactNode) - The label or content to display alongside the radio button. - onChange (function) - A callback function to be called when the radio button state changes. - value (string) - The value associated with the radio button. ## Tooltip Tootip provides additional information or context when a user hovers over or interacts with an element on a web page or application. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles. - className - Override or extend the styles applied to the component. - title (string) - The text or content to display within the tooltip. - children (string|ReactNode) - The content that triggers the tooltip when hovered. ## Scheduler Scheduler is an application designed to manage and display scheduled events or appointments. The primary goal of a scheduler app is to provide users with a visual representation of their schedule, allowing them to view, create, update, and delete events within a specified time frame. ### props: - style - The system prop that allows defining system overrides as well as additional CSS styles - events (Array) - Array of events to be displayed on the scheduler - customEventForm (JSX) - Custom form component for creating and editing events - setUpdateData (Function) - Function to update data when events are updated - customEventDescription (JSX) - Custom component for displaying event descriptions - setStartTime (Function) - Function to set the start time for events - setEndTime (Function) - Function to set the end time for events - descriptionStyle (Style) - Style for the event description component - showWeek (Bool) - Boolean to show or hide the weekly view - formOpen (Bool) - Boolean to open session form the day view - setFormOpen (Function) - Function to set the form open and close - customDatePicker (JSX) - Custom date picker component