Button
Overview
DIGIT UI components provide a variety of buttons with optional suffix and prefix icons, contributing to a cohesive and visually appealing UI.
Properties
Button Type
Primary: Represents the primary action. It features a prominent colour, and its appearance can change on hover or click.
Secondary: Offers a secondary action. It has a different colour scheme than the primary button.
Tertiary: Provides a tertiary action with a distinct visual style.
Link: Resembles a hyperlink, suitable for navigation or linking to other parts of the application. It typically includes an underline.
Hover and Disabled State
The DigitButton widget handles hover effects and a disabled state. When the button is hovered over, it can exhibit visual changes depending on its type. The disabled state prevents interaction and adjusts the button's appearance accordingly.
Icon Placement
The widget supports the placement of icons both before and after the label text. This allows for flexibility in button design.
Properties
It contains the following required Parameters:
Name Description
label(string) text displayed on the button
onPressed(voidCallBack) A callback function, when button is pressed
type specify the type of button(primary or secondary)
These are some optional parameters:
PrefixIcon Icon to be displayed before the label text
SuffixIcon Icon to be displayed after the label text
isDisabled indicates where the button is in a disabled state
Configuration
Primary Button
To use the primary button add the below lines of code:
Button(
label: 'Primary Button',
onPressed: () {},
type: ButtonType.primary,
);
With suffix Icon:
Button(
suffixIcon: Icons.add,
label: 'Primary Button',
onPressed: () {},
type: ButtonType.primary,
);
With prefix Icon:
Button(
prefixIcon: Icons.add,
label: 'Primary Button',
onPressed: () {},
type: ButtonType.primary,
);
Secondary Button
To use the secondary button add the following lines of code:
Button(
label: 'secondary Button',
onPressed: () {},
type: ButtonType.secondary,
);
Prefix and Suffix icons can be added to the secondary button using the same code as given for the primary button.
Tertiary Button
To use the tertiary button add the below lines of code:
Button(
label: 'tertiary Button',
onPressed: () {},
type: ButtonType.tertiary,
);
Link
To use a link, add the following lines of code:
Button(
label: 'link',
onPressed: () {},
type: ButtonType.link,
);
Last updated
Was this helpful?