UI Elements API Reference

This section details the various UI elements available for building rich and interactive user interfaces within the MSDN framework. Each element is designed for reusability, accessibility, and consistency with platform design guidelines.

Button

The Button element is a fundamental interactive control that triggers an action when clicked. It supports various states, including disabled and hover, and can display text or icons.

Properties

Name	Type	Description	Default
label	string	The text displayed on the button.	""
icon	string \| IconComponent	An optional icon to display alongside the label.	null
variant	'primary' \| 'secondary' \| 'outline'	The visual style of the button.	'primary'
disabled	boolean	If true, the button is not interactive.	false

Usage Example

                        
<Button label="Submit" variant="primary" onclick="handleSubmit()" />
<Button label="Cancel" variant="outline" />
<Button icon="refresh" variant="secondary" />

Input

The Input element provides a single-line text entry field. It supports various types such as text, password, email, and number, along with validation and clearable options.

Properties

Name	Type	Description	Default
type	'text' \| 'password' \| 'email' \| 'number' \| 'search'	The type of input field.	'text'
placeholder	string	Text to display when the input is empty.	""
value	string	The current value of the input.	""
onChange	(newValue: string) => void	Callback function when the input value changes.	null
clearable	boolean	If true, displays a clear button when there is text.	false

Usage Example

                        
<Input type="email" placeholder="Enter your email" required />
<Input type="password" placeholder="Password" clearable />
<Input type="text" label="Username" value={userName} onChange={(val) => setUserName(val)} />

Modal

The Modal component displays content in a layer above the main page. It's ideal for confirmations, forms, or displaying detailed information without leaving the current view.

Properties

Name	Type	Description	Default
isOpen	boolean	Controls the visibility of the modal.	false
title	string	The title of the modal window.	""
onClose	() => void	Callback function when the modal is closed (e.g., by clicking the close button or overlay).	null
children	ReactNode	The content to display inside the modal.	null

Usage Example


{`
function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <>

Tooltip

A Tooltip provides additional information or context when a user hovers over an element.

Properties

Name	Type	Description	Default
content	string \| ReactNode	The content to display in the tooltip.	""
children	ReactNode	The element that will trigger the tooltip.	null
position	'top' \| 'bottom' \| 'left' \| 'right'	The positioning of the tooltip relative to its trigger.	'top'

Usage Example

                        
<Tooltip content="This is helpful information" position="bottom">
  <span>Hover over me</span>
</Tooltip>

{/* Add more UI elements here as needed */}