OudsButton class

OUDS Button design guidelines

Buttons are interactive elements designed to trigger specific actions or events when tapped by a user.

This version of the button uses the text only layout which is the most used layout. Other layouts are available for this component: text + icon and icon only.

Note that in the case it is placed in an OudsColoredBox, its monochrome variant is automatically displayed. Some tokens associated with these specific colors can be customized and are identified with the Mono suffix (for instance OudsButtonTokens.colorBgDefaultEnabledMono).

Parameters:

• label: Label displayed in the button which describes the button action. Use action verbs or phrases to tell the user what will happen next.

• icon: Icon displayed in the button. Use an icon to add additional affordance where the icon has a clear and well-established meaning.

• onPressed: Callback invoked when the button is clicked.

  Controls the enabled state of the button when loader is equal to null. When false, this button will not be clickable. Has no effect when loader is not null.

• loader: An optional loading progress indicator displayed in the button to indicate an ongoing operation.

• hierarchy: The button appearance based on its OudsButtonHierarchy. A button with OudsButtonHierarchy.negative hierarchy is not allowed as a direct or indirect child of an OudsColoredBox and will throw an IllegalStateException.

You can use OudsButton like this :

Text only button :

This is the default layout of the component.

OudsButton(
      label: 'Button',
      hierarchy: OudsButtonHierarchy.defaultHierarchy,
      onPressed: () {
        // Handle button tap.
     },
    );

This is the Loading layout of the component.

OudsButton(
      label: 'Button',
      loader: Loader(progress: null),
      hierarchy: OudsButtonHierarchy.defaultHierarchy,
      onPressed: () {
        // Handle button tap.
     },
    );