GSButton

A button widget is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website.

API Reference


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSButton(
      action: GSActions.primary,
      variant: GSVariants.solid,
      size: GSSize.$md,
      isDisabled: false,
      isFocusVisible: false,
      onPressed: () {},
      child: const GSHStack(
        children: [
          GSButtonText(text: "Add"),
          GSButtonIcon(icon: Icons.add)
        ],
      ),
    )

API Reference

Import

To use this component in your project, include the following import statement in your file.

import "package:gluestack_ui/gluestack_ui.dart"

This section provides a comprehensive reference list for the widget parameters, detailing descriptions, properties, types, and default behavior for easy project integration.

GSButton

Contains all button related layout style parameters and properties. It inherits all the properties of Flutter's ElevatedButton widget.

Parameters	Type	Default	Description
isFocusVisible	bool	false	To manually set focused state to the button.
isDisabled	bool	false	To manually set disable to the button.

Descendants Styling Parameters Parameters to style child widgets.

style: The style parameter serves as a means to customize the appearance of child widgets within each component. It provides a flexible way to apply styling to the internal elements, allowing for precise control over the visual presentation of the widget's content.

GSButtonText

Contains all text related layout style, properties and actions. It inherits all the properties of Flutter's Text widget.

Descendants Styling Parameters Parameters to style child widgets.

Parameters	Description
style	Parameter to style GSButton Widget

GSSpinner

Contains all spinner related layout style, properties and actions. It inherits all the properties of Flutter's CircularProgressIndicator widget.

GSButtonIcon

Contains all Icon related layout style, properties and actions. It inherits all the properties of Flutter's Icon widget.

Features

Keyboard support for actions.
Support for hover, focus and active states.
Option to add your styles or use the default styles.

Accessibility

We have outlined the various features that ensure the GSButton widget is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the WAI-ARIA design pattern.

Keyboard

Tab: Moves focus to the next focusable widget.
Shift + Tab: Moves focus to the previous focusable widget.
Enter: Triggers the button's action.

VoiceOver: When the button is focused, the screen reader will announce the button's label and its current state.

Focus Management

The onFocusChange, onHover and onLongPress parameters to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.

Parameters

GSButton widget is created using ElevatedButton widget from flutter. It extends all the parameters, methods supported by Flutter ElevatedButton and additionally the properties mentioned below.

GSButton

Name	Value	Default
action	primary \| secondary \| positive \| negative	primary
variant	link \| outline \| solid	solid
size	xs \| sm \| md \| lg	md

Note: These properties are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these properties may not be available.

Examples

The Examples section provides visual representations of the different variants of the widget, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Button with Loading State

A loading button is a type of button widget that provides visual feedback to the user during an action that takes some time to complete. It typically displays an animated loading icon or spinner indicating the action is in progress.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSButton(
      child: GSHStack(
        children: [
          GSSpinner(
            strokeWidth: 2,
            style: GSStyle(
              color: $GSColors.white,
              bg: $GSColors.blueGray300,
              width: 20,
              height: 20,
            ),
          ),
          const SizedBox(
            width: 7,
          ),
          GSButtonText(
            text: "Please wait",
          ),
        ],
      ),
      onPressed: () {},
    )

Icon Button

A button with an icon integrates a visual symbol within the button widget, enhancing its appearance and providing a recognizable and intuitive representation of its associated action or functionality.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSButton(
      style: GSStyle(width: 55, height: 55, borderRadius: 30),
      child: const GSButtonIcon(
        icon: Icons.calendar_view_week_outlined,
      ),
      onPressed: () {},
    )

Link Button

A button with a link combines the interactive behavior of a button widget with the ability to navigate to a specified URL, providing a clickable element for users to access external resources or internal pages.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSButton(
      variant: GSButtonVariants.link,
      style: GSStyle(
        color: Colors.transparent,
        onHover: GSStyle(bg: Colors.transparent),
      ),
      child: const GSText(text: 'Back to top'),
      onPressed: () {},
    )

Button Group in a Card

A button group within a card widget incorporates multiple button widgets, providing a cohesive and organized interface for selecting various actions or options within the context of the card.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSBox(
      style: GSStyle(
        borderColor: $GSColors.warmGray500,
        width: 1000,
        height: 200,
        borderRadius: 8,
        borderWidth: 1.2,
      ),
      child: GSHStack(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GSBox(
            style: GSStyle(width: 300),
            child: const GSVStack(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                GSHeading(
                  text: 'Was this page helpful?',
                ),
                GSText(
                  text: 'We use this feedback to improve the quality of our documentation.',
                ),
              ],
            ),
          ),
          GSHStack(
            children: [
              GSButton(
                variant: GSVariants.outline,
                action: GSActions.secondary,
                child: GSButtonText(
                  text: "No",
                  style: GSStyle(),
                ),
                onPressed: () {},
              ),
              const SizedBox(
                width: 20,
              ),
              GSButton(
                variant: GSVariants.solid,
                action: GSActions.positive,
                child: GSButtonText(
                  text: "Yes",
                  style: GSStyle(),
                ),
                onPressed: () {},
              ),
            ],
          ),
        ],
      ),
    )

Button With Icon

The icon widget incorporates a button widget, combining visual representation with interactive functionality for seamless user interaction.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSBox(
      style: GSStyle(
        width: 300,
        height: 100,
      ),
      child: GSVStack(
        children: [
          GSButton(
            child: GSHStack(
              children: [
                GSIcon(
                  icon: Icons.edit,
                  style: GSStyle(color: $GSColors.white),
                ),
                const SizedBox(
                  width: 5,
                ),
                GSButtonText(
                  text: "Left Icon",
                  style: GSStyle(),
                ),
              ],
            ),
            onPressed: () {},
          ),
          const SizedBox(
            height: 20,
          ),
          GSButton(
            child: GSHStack(
              children: [
                GSButtonText(
                  text: "Right Icon",
                  style: GSStyle(),
                ),
                const SizedBox(
                  width: 5,
                ),
                GSIcon(
                  icon: Icons.add,
                  style: GSStyle(color: $GSColors.white),
                ),
              ],
            ),
            onPressed: () {},
          ),
        ],
      ),
    )

Button with Full Width

The button with full width widget utilizes a button widget, expanding its width to occupy the entire available space, creating a visually prominent and easily accessible interface element.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSBox(
      style: GSStyle(
        borderColor: $GSColors.warmGray500,
        width: 320,
        height: 350,
        borderRadius: 8,
        borderWidth: 1.2,
        padding: const EdgeInsets.symmetric(horizontal: 20),
      ),
      child: GSVStack(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const GSVStack(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              GSHeading(
                text: 'Set new password',
              ),
              GSText(
                text:
                    'Almost done. Enter your new password and you are all set.',
              ),
            ],
          ),
          const GSInput(
            size: GSSizes.$sm,
            variant: GSVariants.outline,
            cursorHeight: 12,
            constraints: BoxConstraints(
              maxWidth: 280,
              maxHeight: 40,
            ),
            labelText: "New password",
            labelStyle: TextStyle(fontSize: 12),
            errorStyle: TextStyle(
              fontSize: 7,
            ),
          ),
          const GSInput(
            size: GSSizes.$sm,
            variant: GSVariants.outline,
            cursorHeight: 12,
            constraints: BoxConstraints(
              maxWidth: 280,
              maxHeight: 40,
            ),
            labelText: "Confirm new password",
            labelStyle: TextStyle(fontSize: 12),
            errorStyle: TextStyle(
              fontSize: 7,
            ),
          ),
          GSBox(
            style: GSStyle(
              width: double.maxFinite,
            ),
            child: GSButton(
              variant: GSVariants.solid,
              action: GSActions.primary,
              size: GSSizes.$lg,
              child: const GSButtonText(
                text: "Submit",
              ),
              onPressed: () {},
            ),
          ),
        ],
      ),
    )