Button
Overview of the Button Component
Buttons provide clickable elements used in forms or anywhere where simple, standard button functionality is required.
Being the most popular component, the Button component can be used to navigate to a page or link, copy a property to a local storage variable or set the other component’s property, open and close popups, invoke a service, or run JavaScript. It may display text, icons, or both.
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
Ionic Button
If the button's type is set to Ionic Button (default) under the PROPERTIES panel (Common tab), the component will feature the following common properties:
| Property Name | Property Description |
|---|---|
| Comp. Type | Use this property to change the button role for interaction with Menu (Ionic Menu Button) or Routing (Ionic Back Button): Ionic Button Ionic Menu Button Ionic Back Button. Navigation with Routing has higher priority than Href. |
| Button Type | Click to select between Button (default) or Bar Button. |
| Icon | Make a button look like an icon. This property converts the button to an icon by changing its Style property and ignoring the Text property. Style - click No icon to change the icon style by selecting a needed icon. Name allows changing Ionic icon style dynamically by property binding to "2-0. Color - the color to use from your application's color palette. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name. Slot - position inside the button: Icon only, Start, End. SVG Icon - used to select an svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager. |
| Routing | Route Name - define the list of routes names from the Routing panel. Route Params - the field used to add values for Route Params described in the Routing panel. Router Direction - when using a router, it specifies the transition direction (back, forward or root) when navigating to another page using href. |
| Link Features | Options for the component to be used as a link: Href - this property contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. Type of the Button: Submit, Reset, Button. Target - specify where to display the linked URL. Only applies when an Href is provided: Blank, Self, Parent, or Top Rel - specify the relationship of the target object to the link object. |
| (click) | Action to be triggered on button click. |
Styles Properties
Under the Styles tab, buttons can be styled with several attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Button Color | Select button color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
| Expand | Set to Block for a full-width button or to Full for a full-width button without left and right borders. |
| Fill | Set to Solid or select Clear for a transparent button, or Outline for a transparent button with a border. |
| Shape | Setting to Round makes the button rounded. |
| Size | Select the preferred button size: Small, Defaultor Large. |
| Strong | If set to True, activates a button with a heavier font weight. |
| Text Color | Select button text color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
Ionic Menu Button
Menu Button is a component that automatically creates the icon and functionality to open a menu on a page.
If you define the button Comp. Type property as Ionic Menu Button, the component will have the additional Menu Button properties under its Common tab:
Auto Hide - automatically hides the menu button when the corresponding menu is not active (set to true).
SVG Icon - used to select an svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager.
Menu - an optional property that maps to a Menu's menuId property. It can also be start or end for the menu side. It is used to find the correct menu to toggle.
Type - type of the menu button (Submit, Reset, or Button):
If you switch to the Styles tab, you will get access to modifying the component's Class, Margin, Mode, and Button Color properties similar to how it's done for the default Ionic Button.
Ionic Back Button
With the button Comp. Type property set to as Ionic Back Button, the component will have the additional Back Button properties under its Common tab:
Icon - icon name to use for the back button. Click the Default icon button to select an icon, or leave it to default.
SVG Icon - used to select an svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager.
Text - text to display in the back button.
Type - the type of the back button (Submit, Reset, or Button).
Default Href - the URL to navigate back to by default when there is no history:
If you switch to the Styles tab, you will get access to modifying the component's Class, Margin, Mode, and Button Color properties similar to how it's done for the default Ionic Button.
You can also check the Ionic documentation to read more about Button.
Updated 5 months ago