Fluent UI Button Example - Fluent-ui Typing CST Test
Loading…
Fluent UI Button Example — Fluent-ui Code
Demonstrates different Fluent UI button styles and intents.
import React from 'react';
import { DefaultButton, PrimaryButton, Stack } from '@fluentui/react';
const ButtonExample = () => (
<Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }} tokens={{ childrenGap: 10 }}>
<DefaultButton text='Default' />
<PrimaryButton text='Primary' />
<DefaultButton text='Disabled' disabled />
</Stack>
);
export default ButtonExample;Fluent-ui Language Guide
Fluent UI is a React-based front-end framework developed by Microsoft that provides a set of customizable, accessible, and enterprise-ready UI components for building modern web applications.
Primary Use Cases
- ▸React-based enterprise web applications
- ▸Office 365 and Microsoft Teams integrations
- ▸Admin dashboards with complex forms and data tables
- ▸Accessible and standardized UI across large organizations
- ▸Rapid prototyping with consistent design patterns
Notable Features
- ▸Accessible components with ARIA roles
- ▸Themeable design system with light/dark modes
- ▸Composable React components (Button, ComboBox, DetailsList)
- ▸Integration with Fluent Design System
- ▸Responsive design utilities
Origin & Creator
Created by Microsoft (initially as Office UI Fabric) in 2016 to standardize UI for Office and enterprise apps.
Industrial Note
Fluent UI is widely used in Microsoft ecosystems, Office 365 integrations, and enterprise web applications requiring consistency with Microsoft design guidelines.