Button

Presentations v1.0 zero-schema

No description provided.

Required fields

PresentationType Text OnClick

Properties

PresentationType string required

Button indicates a standard button with a clickable surface and visual feedback, while TextButton represents a button that appears as simple text without any background or borders, typically used for less

Allowed Button TextButton

Text string required

The text content to be displayed on the button

Default "title"

OnClick composed required

OnClick represents the configuration for handling events when the button is clicked, a way to define actions or behaviors in response to user interaction with the button.

Ref Actions / Action / 1.0

Color string, object optional

Color of text within button and supports color names, primary color ('primary'), or hash codes. Accepts a color name, the "primary" token, a #hex string, or a gradient object ({"Colors": [...], "Type": "Linear"|"Radial"|"Sweep"}).

Icon string optional

Icon supports Font Awesome icons, allowing for the display of icons within the button widget

IconSize number, object optional

Size of an icon in pixel. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 16

FontWeight string optional

Defines the weight of font default is normal. Default is 'normal' (FontWeight.w400)

Default "normal"

Allowed w100 w200 w300 normal w500 w600 bold w800 w900

Padding number, object optional

The padding around the button content in pixel. Accepts a number for all sides, or an LTRB object ({"Top": …, "Left": …, "Right": …, "Bottom": …}). Responsive value maps are NOT supported here and resolve to zero.

Default 15

FontSize number, object optional

The font size of the text. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 16

FontFamily string optional

The font family of the text

Default "DefaultUIFont"

Allowed DefaultUI DefaultMonospace Google:Inter Google:Roboto Google:Open Sans Google:Lato Google:Montserrat Google:Poppins Google:Nunito Google:Nunito Sans Google:Raleway Google:Work Sans Google:Rubik Google:Karla Google:Manrope Google:DM Sans Google:Outfit Google:Sora Google:Space Grotesk Google:Plus Jakarta Sans Google:Barlow Google:Cabin Google:Ubuntu Google:PT Sans Google:Fira Sans Google:Josefin Sans Google:Quicksand Google:Archivo Google:Noto Sans Google:Merriweather Google:Playfair Display Google:Lora Google:PT Serif Google:EB Garamond Google:Libre Baskerville Google:Crimson Text Google:Roboto Slab Google:Zilla Slab Google:Noto Serif Google:Oswald Google:Bebas Neue Google:Anton Google:Pacifico Google:Dancing Script Google:Caveat Google:Comfortaa Google:Righteous Google:Fira Code Google:JetBrains Mono Google:Roboto Mono Google:Source Code Pro Google:Space Mono Google:Inconsolata Google:Mukta Google:Hind Google:Noto Sans Devanagari

BorderColor string, object optional

The color of buttons border. Accepts a color name, the "primary" token, a #hex string, or a gradient object ({"Colors": [...], "Type": "Linear"|"Radial"|"Sweep"}).

Default "transparent"

BorderWidth number, object optional

Width of buttons border in pixels. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 1

LabelHorizontal boolean optional

A boolean value indicating whether the button's Icons horizontally.

Default true

BorderRadius number, object optional

Radius for buttons corners. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 0

BackgroundColor string, object optional

The background color of the button. Accepts a color name, the "primary" token, a #hex string, or a gradient object ({"Colors": [...], "Type": "Linear"|"Radial"|"Sweep"}).

Default "transparent"

ForegroundColor string, object optional

The Foreground color of the button. Accepts a color name, the "primary" token, a #hex string, or a gradient object ({"Colors": [...], "Type": "Linear"|"Radial"|"Sweep"}).

Default "transparent"

MainAxisAlignment string optional

The alignment of the button's content along the main direction it is moving.

Default "Start"

Allowed Start End Center SpaceBetween SpaceAround SpaceEvenly

CrossAxisAlignment string optional

The alignment of the button's contents perpendiculat to main direction.

Default "Start"

Allowed Start End Center Stretch Baseline

IsLabelHorizontal boolean optional

Determines wheather the label to be displayed horizontally or vertically.

Default true

Referenced contracts

Actions / Action / 1.0 raw

{ "$id": "/schema/Presentations/Button/1.0/index.json", "type": "object", "title": "Button", "$schema": "http://json-schema.org/draft-07/schema#", "required": [ "PresentationType", "Text", "OnClick" ], "properties": { "PresentationType": { "enum": [ "Button", "TextButton" ], "type": "string", "description": "Button indicates a standard button with a clickable surface and visual feedback, while TextButton represents a button that appears as simple text without any background or borders, typically used for less " }, "Text": { "type": "string", "description": "The text content to be displayed on the button", "default": "title" }, "OnClick": { "description": "OnClick represents the configuration for handling events when the button is clicked, a way to define actions or behaviors in response to user interaction with the button.", "allOf": [ { "$ref": "/schema/Actions/Action/1.0/index.json" } ] }, "Color": { "type": [ "string", "object" ], "description": "Color of text within button and supports color names, primary color ('primary'), or hash codes. Accepts a color name, the \"primary\" token, a #hex string, or a gradient object ({\"Colors\": [...], \"Type\": \"Linear\"|\"Radial\"|\"Sweep\"}).", "x-editor": "color" }, "Icon": { "type": "string", "description": "Icon supports Font Awesome icons, allowing for the display of icons within the button widget" }, "IconSize": { "type": [ "number", "object" ], "default": 16, "description": "Size of an icon in pixel. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …})." }, "FontWeight": { "type": "string", "enum": [ "w100", "w200", "w300", "normal", "w500", "w600", "bold", "w800", "w900" ], "default": "normal", "description": "Defines the weight of font default is normal. Default is 'normal' (FontWeight.w400)" }, "Padding": { "type": [ "number", "object" ], "default": 15, "description": "The padding around the button content in pixel. Accepts a number for all sides, or an LTRB object ({\"Top\": …, \"Left\": …, \"Right\": …, \"Bottom\": …}). Responsive value maps are NOT supported here and resolve to zero." }, "FontSize": { "type": [ "number", "object" ], "description": "The font size of the text. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …}).", "default": 16 }, "FontFamily": { "type": "string", "description": "The font family of the text", "default": "DefaultUIFont", "enum": [ "DefaultUI", "DefaultMonospace", "Google:Inter", "Google:Roboto", "Google:Open Sans", "Google:Lato", "Google:Montserrat", "Google:Poppins", "Google:Nunito", "Google:Nunito Sans", "Google:Raleway", "Google:Work Sans", "Google:Rubik", "Google:Karla", "Google:Manrope", "Google:DM Sans", "Google:Outfit", "Google:Sora", "Google:Space Grotesk", "Google:Plus Jakarta Sans", "Google:Barlow", "Google:Cabin", "Google:Ubuntu", "Google:PT Sans", "Google:Fira Sans", "Google:Josefin Sans", "Google:Quicksand", "Google:Archivo", "Google:Noto Sans", "Google:Merriweather", "Google:Playfair Display", "Google:Lora", "Google:PT Serif", "Google:EB Garamond", "Google:Libre Baskerville", "Google:Crimson Text", "Google:Roboto Slab", "Google:Zilla Slab", "Google:Noto Serif", "Google:Oswald", "Google:Bebas Neue", "Google:Anton", "Google:Pacifico", "Google:Dancing Script", "Google:Caveat", "Google:Comfortaa", "Google:Righteous", "Google:Fira Code", "Google:JetBrains Mono", "Google:Roboto Mono", "Google:Source Code Pro", "Google:Space Mono", "Google:Inconsolata", "Google:Mukta", "Google:Hind", "Google:Noto Sans Devanagari" ] }, "BorderColor": { "type": [ "string", "object" ], "description": "The color of buttons border. Accepts a color name, the \"primary\" token, a #hex string, or a gradient object ({\"Colors\": [...], \"Type\": \"Linear\"|\"Radial\"|\"Sweep\"}).", "default": "transparent", "x-editor": "color" }, "BorderWidth": { "type": [ "number", "object" ], "description": "Width of buttons border in pixels. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …}).", "default": 1 }, "LabelHorizontal": { "type": "boolean", "description": "A boolean value indicating whether the button's Icons horizontally.", "default": true }, "BorderRadius": { "type": [ "number", "object" ], "default": 0, "description": "Radius for buttons corners. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …})." }, "BackgroundColor": { "type": [ "string", "object" ], "description": "The background color of the button. Accepts a color name, the \"primary\" token, a #hex string, or a gradient object ({\"Colors\": [...], \"Type\": \"Linear\"|\"Radial\"|\"Sweep\"}).", "default": "transparent", "x-editor": "color" }, "ForegroundColor": { "type": [ "string", "object" ], "description": "The Foreground color of the button. Accepts a color name, the \"primary\" token, a #hex string, or a gradient object ({\"Colors\": [...], \"Type\": \"Linear\"|\"Radial\"|\"Sweep\"}).", "default": "transparent", "x-editor": "color" }, "MainAxisAlignment": { "enum": [ "Start", "End", "Center", "SpaceBetween", "SpaceAround", "SpaceEvenly" ], "type": "string", "default": "Start", "description": "The alignment of the button's content along the main direction it is moving." }, "CrossAxisAlignment": { "enum": [ "Start", "End", "Center", "Stretch", "Baseline" ], "type": "string", "default": "Start", "description": "The alignment of the button's contents perpendiculat to main direction." }, "IsLabelHorizontal": { "type": "boolean", "default": true, "description": "Determines wheather the label to be displayed horizontally or vertically." } }, "examples": [ { "PresentationType": "Button", "Text": "View products", "Icon": "app-store", "FontSize": 14, "BorderRadius": 8, "Color": "#FFFFFF", "BackgroundColor": "#0C29AB", "OnClick": { "Handler": "Navigation", "Url": "/products" } }, { "PresentationType": "Button", "Text": "Save", "BorderRadius": 8, "OnClick": { "Handler": "Http", "Method": "POST", "Url": "/api/data/products", "OnSuccess": { "Handler": "SnackBar", "Message": "Saved." }, "OnFailure": { "Handler": "Alert", "Theme": "Danger", "Title": "Save failed", "Message": "Please try again." } } } ], "x-icon": "<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"8\" rx=\"4\"/><path d=\"M7.5 12h9\"/></svg>", "x-family": "Presentations", "x-name": "Button", "x-version": "1.0", "x-source-package": "zero-schema" }

{ "PresentationType": "Button", "Text": "View products", "Icon": "app-store", "FontSize": 14, "BorderRadius": 8, "Color": "#FFFFFF", "BackgroundColor": "#0C29AB", "OnClick": { "Handler": "Navigation", "Url": "/products" } }

{ "PresentationType": "Button", "Text": "Save", "BorderRadius": 8, "OnClick": { "Handler": "Http", "Method": "POST", "Url": "/api/data/products", "OnSuccess": { "Handler": "SnackBar", "Message": "Saved." }, "OnFailure": { "Handler": "Alert", "Theme": "Danger", "Title": "Save failed", "Message": "Please try again." } } }