MSDN Documentation

UI Elements Reference

This section details the various standard UI elements available for building user interfaces within the MSDN ecosystem. Understanding these elements and their properties is crucial for creating consistent, accessible, and visually appealing applications.

Buttons

Buttons are interactive elements that trigger an action when clicked or activated.

Button Styles

Buttons come in different styles to indicate their importance and function. Use the primary style for the most important action, secondary for less critical actions, and outline for neutral actions. The disabled state should be used when an action is temporarily unavailable. 

<button>Click Me</button>
<button class="secondary">Cancel</button>
<button class="outline">More Info</button>
<button disabled>Unavailable</button>

Input Fields

Input fields allow users to enter data. This includes text inputs, checkboxes, radio buttons, and select dropdowns.

Standard Input Types





Input fields should be clearly labeled to ensure usability. Placeholders provide hints but do not replace labels. Checkboxes are for independent selections, while radio buttons are for mutually exclusive choices within a group. 

<input type="text" placeholder="Name">
<label><input type="checkbox"> Subscribe</label>
<select>
  <option>Choose...</option>
  <option>Option 1</option>
</select>

Cards

Cards are container elements used to group related information, often visually separating content blocks.

Content Card

Card Title

This is the main content of the card. It can contain text, images, or other components to present information in a digestible format.

Cards provide a structured way to present content, making interfaces cleaner and easier to scan. They typically include a title, description, and optional action buttons. 

<div class="ui-element-card">
  <h5>Card Title</h5>
  <p>Card content goes here.</p>
  <button class="outline">Action</button>
</div>

Modals

Modals are dialog boxes that appear on top of the main content, requiring user interaction before they can return to the underlying page.

Modal Example

Modals are used for critical alerts, confirmation prompts, or forms that require immediate attention. They should have a clear way to be closed. 

<button onclick="openModal()">Open</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <h3>Modal Title</h3>
    <p>Modal body.</p>
  </div>
</div>

Tooltips

Tooltips provide brief, contextual information when a user hovers over or focuses on an element.

Tooltip on Hover

Hover over me This is a tooltip!

Tooltips are helpful for explaining icons, abbreviations, or complex features without cluttering the main interface. 

<span class="tooltip">Element<span class="tooltiptext">Helpful info</span></span>

Tabs

Tabs allow users to switch between different views or sections of content within the same container.

Tab Navigation

Content for Section 1

This is the content displayed when the first tab is active.

Tabs are excellent for organizing large amounts of information into manageable chunks, improving navigability. 

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-button active" onclick="openTab(event, 'tab1')">Tab 1</button>
    <button class="tab-button" onclick="openTab(event, 'tab2')">Tab 2</button>
  </div>
  <div id="tab1" class="tab-content"> ... </div>
  <div id="tab2" class="tab-content"> ... </div>
</div>

For more advanced UI elements and custom components, please refer to the Core Controls section.