Buttons

Button Types

We support Elevated buttons, Outlined buttons, Text buttons, and Icon Buttons.

Button sub types

button sub types depending on the use-case. As of now we support 7 sub types of buttons.

  1. Primary,
  2. Secondary,
  3. Info,
  4. Success,
  5. Danger,
  6. Warning,
  7. Help.
Precedents
  • if style attribute is passed, then it will precedent all the other properties related to appereance.
  • When buttonType and backgroundColor both properties are used, backgroundColor will take Precedent over buttonType.

Elevated Button

elevated-buttons

We have two required properties. onPressed and text.

ButtonElevated(
    onPressed: () {},
    text: "Button",
),

How to apply custom style?

ButtonElevated(
    onPressed: () {},
    text: "Custom style",
    style: ElevatedButton.styleFrom(
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
    ),
),

How to apply buttonType?

ButtonElevated(
    onPressed: () {},
    text: "Info",
    buttonType: ButtonType.info,
),

How to apply custom background and foreground colors?

ButtonElevated(
    onPressed: () {},
    text: "Color",
    backgroundColor: Colors.white,
    foregroundColor: Colors.black,
),

Changing Border Radius

ButtonElevated(
    onPressed: () {},
    text: "Border Radius",
    borderRadius: 100,
),

Changing Padding

ButtonElevated(
    onPressed: () {},
    text: "Padding",
    padding: horizontalPadding32 + verticalPadding12,
),

Changing font size

ButtonElevated(
    onPressed: () {},
    text: "font size",
    fontSize: 10,
),

Outlined Button

elevated-buttons

We have same properties like elevated button for outlined button. onPressed, text, style, buttonType, foregroundColor, fontSize, borderRadius, padding.

example:

ButtonOutlined(
    onPressed: () {},
    text: "Info",
    buttonType: ButtonType.info,
),

Text Button

elevated-buttons

We have same properties like elevated button for text button. onPressed, text, style, buttonType, foregroundColor, fontSize, borderRadius, padding.

example:

ButtonText(
    onPressed: () {},
    text: "Info",
    buttonType: ButtonType.info,
),

Icon Button

elevated-buttons

We have some properties like elevated button for icon button. onPressed, buttonType, borderRadius, padding.

We have some new properties like iconData, color, iconSize, enableBorder.

How to use icon data?

ButtonIcon(
    onPressed: () {},
    iconData: FontAwesomeIcons.heart,
),

How to use color?

ButtonIcon(
    onPressed: () {},
    color: Colors.pink,
    iconData: FontAwesomeIcons.heart,
),

How to change icon size?

ButtonIcon(
    onPressed: () {},
    color: Colors.pink,
    iconData: FontAwesomeIcons.heart,
    iconSize: 30,
),

How to enable/ disable border?

ButtonIcon(
    onPressed: () {},
    iconData: FontAwesomeIcons.heart,
    enableBorder: false,
),

Buttons with icons

Elevated Button With Icon

We have two extra properties for ButtonElevatedWithIcon than ButtonElevated. Using those (iconData and iconSize) we can change icon appereance.

ButtonElevatedWithIcon(
    onPressed: () {},
    text: "Icon Button",
    iconData: FontAwesomeIcons.user,
    iconSize: 22,
),

Outlined Button With Icon

We have two extra properties for ButtonOutlinedWithIcon than ButtonOutlined. Using those (iconData and iconSize) we can change icon appereance.

ButtonOutlinedWithIcon(
    onPressed: () {},
    text: "Icon Button",
    iconData: FontAwesomeIcons.user,
    iconSize: 22,
),

Text Button With Icon

We have two extra properties for ButtonTextWithIcon than ButtonText. Using those (iconData and iconSize) we can change icon appereance.

ButtonTextWithIcon(
    onPressed: () {},
    text: "Icon Button",
    iconData: FontAwesomeIcons.user,
    iconSize: 22,
),
Edit this page on GitHub
Table of Contents