Button

Buttons are used to trigger actions.

Figma Link

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=23132-166632

Web Components

Demo

zeta-web v0.12.9

Web Components

Storybook

https://design.zebra.com/web/storybook/?path=/docs/components-buttons--docs

Slots

Name	Description	Type
default	Content shown on button; typically text.	text

Attributes

Name	Description	Type	Default
leadingIcon	Leading icon of button. Full list of icons can be found at https://design.zebra.com/icons	Zeta Icons.	ZetaIconName | null
trailingIcon	Trailing icon of button. Full list of icons can be found at https://design.zebra.com/icons	Zeta Icons.	ZetaIconName | null

Inherited Attributes

Name	Description	Type	Default	Inherited From
flavor	The flavor of the component determines the visual style of the component.	'primary' | 'positive' | 'negative' | 'outline' | 'outline-subtle' | 'text' | 'subtle'	"primary"	Flavored
shape	Whether the component is sharp, rounded or fully rounded.This will change the border radius and icon font.Possible values are: - sharp: No border radius, uses "zeta-icons-sharp"- rounded: Minimal border radius, uses "zeta-icons-round"- full: Full border radius, uses "zeta-icons-round"	'sharp' | 'rounded' | 'full'	"rounded"	BaseButton
size	Size of component	SizeType	"medium"	BaseButton
disabled	Boolean for if component is disabled.This will apply disabled styles.	boolean	false	BaseButton
tabIndex	The tab index of the component, used to determine the order in which elements receive focus when the user navigates through the document by pressing the Tab key.	number	0	BaseButton
type	The type of the button when used in a form	"submit" | "reset" | "button" | undefined	undefined	BaseButton
name	Name for the button, used if the button is in a form.	string | undefined	undefined	BaseButton
value	The value of the name property When submitted as part of a form	string | undefined	undefined	BaseButton

Flutter

Demo

Widgetbook

https://design.zebra.com/flutter/widgetbook/index.html#/?path=components/button/zetabutton/button

Inheritance

Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget

Constructors

Constructs ZetaButton

ZetaButton.new({Key? key, required String label, VoidCallback? onPressed, ZetaButtonType type = ZetaButtonType.primary, ZetaWidgetSize size = ZetaWidgetSize.medium, ZetaWidgetBorder? borderType, IconData? leadingIcon, IconData? trailingIcon, FocusNode? focusNode, String? semanticLabel, Widget? child})

Constructs ZetaButton with Negative theme.

ZetaButton.negative({Key? key, required String label, VoidCallback? onPressed, ZetaWidgetSize size = ZetaWidgetSize.medium, ZetaWidgetBorder? borderType, IconData? leadingIcon, IconData? trailingIcon, FocusNode? focusNode, String? semanticLabel, Widget? child})

Constructs ZetaButton with Outline theme.

ZetaButton.outline({Key? key, required String label, VoidCallback? onPressed, ZetaWidgetSize size = ZetaWidgetSize.medium, ZetaWidgetBorder? borderType, IconData? leadingIcon, IconData? trailingIcon, FocusNode? focusNode, String? semanticLabel, Widget? child})

Constructs ZetaButton with Outline Subtle theme.

ZetaButton.outlineSubtle({Key? key, required String label, VoidCallback? onPressed, ZetaWidgetSize size = ZetaWidgetSize.medium, ZetaWidgetBorder? borderType, IconData? leadingIcon, IconData? trailingIcon, FocusNode? focusNode, String? semanticLabel, Widget? child})

Constructs ZetaButton with Positive theme.

ZetaButton.positive({Key? key, required String label, VoidCallback? onPressed, ZetaWidgetSize size = ZetaWidgetSize.medium, ZetaWidgetBorder? borderType, IconData? leadingIcon, IconData? trailingIcon, FocusNode? focusNode, String? semanticLabel, Widget? child})

Constructs ZetaButton with Primary theme.

ZetaButton.primary({Key? key, required String label, VoidCallback? onPressed, ZetaWidgetSize size = ZetaWidgetSize.medium, ZetaWidgetBorder? borderType, IconData? leadingIcon, IconData? trailingIcon, FocusNode? focusNode, String? semanticLabel, Widget? child})

Constructs ZetaButton with Secondary theme.

ZetaButton.secondary({Key? key, required String label, VoidCallback? onPressed, ZetaWidgetSize size = ZetaWidgetSize.medium, ZetaWidgetBorder? borderType, IconData? leadingIcon, IconData? trailingIcon, FocusNode? focusNode, String? semanticLabel, Widget? child})

Constructs ZetaButton with text theme.

ZetaButton.text({Key? key, required String label, VoidCallback? onPressed, ZetaWidgetSize size = ZetaWidgetSize.medium, ZetaWidgetBorder? borderType, IconData? leadingIcon, IconData? trailingIcon, FocusNode? focusNode, String? semanticLabel, Widget? child})

Properties

Name	Description	Type	Features
borderType	Whether or not the button is sharp or rounded	ZetaWidgetBorder?	final
child	Child widget to display inside the button, if any.	Widget?	final
focusNode	An optional focus node to use as the focus node for this widget.	FocusNode?	final
hashCode	The hash code for this object.	int	no setter inherited
key	Controls how one widget replaces another widget in the tree.	Key?	final inherited
label	Button label	String	final
leadingIcon	Leading icon of button. Goes in front of button.	IconData?	final
onPressed	Called when the button is tapped or otherwise activated.	VoidCallback?	final
rounded	Sets rounded or sharp border of the containing box and the icon style.	bool?	final inherited
runtimeType	A representation of the runtime type of the object.	Type	no setter inherited
semanticLabel	The semantic label of the button.	String?	final
size	Size of the button. Defaults to large.	ZetaWidgetSize	final
trailingIcon	Trailing icon of button. Goes behind button.	IconData?	final
type	The coloring type of the button	ZetaButtonType	final