ButtonUsage - Fluentui

Fluent UI React Native Buttons have default styling based on the Fluent UI Design Language. To customize the button's visuals, you should use the "compose" pattern to customize the tokens. For more information on the compose pattern, please see our compose documentation.

Button example

Default Button (Windows)

Primary Button (Windows)

Default Button (macOS)

Primary Button (macOS)

Example usage (from ButtonFocusTest.tsx)

import * as React from 'react';
import { Button, IFocusable } from '@fluentui/react-native';
import { View } from 'react-native';

const App = () => {
  const [state, setState] = React.useState({
    focused: false
  });
  const buttonRef = React.useRef<IFocusable>(null);

  const onFocus = React.useCallback(() => {
    setState({ focused: !state.focused });
    if (buttonRef.current && !state.focused) {
      buttonRef.current.focus();
    }
  }, [state, setState]);

  return (
    <View>
      <Button
        content={state.focused ? "Focused" : "Not Focused"}
        componentRef={buttonRef}
      />
      <Button content="Click to focus" onClick={onFocus} />
    </View>
  );
};

export default App;