Settings
AddonsCard design schemaElement typesPrimary Button

PrimaryButton

The PrimaryButton is a flexible button component that is useful for displaying a primary button to execute an action.

Interface

interface IPrimaryButton extends IElement {
  text?: string | ILocales;
  hoverText?: string | ILocales;
  iconProps?: IIconProps;
  disabled?: boolean;
  styles?: IButtonStyles;
}

Example

PrimaryButton
{
  "type": "PrimaryButton",
  "text": "@eval({base.socials.follow.status} ? {'en-US': 'Following','es-ES':'Siguiendo', 'it-IT': 'Following'} : {'en-US': 'Follow','es-ES': 'Seguir', 'it-IT': 'Segui' })",
  "hoverText": "@eval({base.socials.follow.status} && {'en-US': 'Unfollow','es-ES': 'Dejar de seguir', 'it-IT': 'Smetti di seguire' })",
  "onClick": {
    "type": "Follow",
    "uniqueId": "{base.uniqueId}",
    "dataPropToUpdate": "base.socials.follow.status",
    "updateData": {
      "base.socials.follow.count": "@eval({base.socials.follow.status} ? {base.socials.follow.count} - 1 : {base.socials.follow.count} + 1)"
    }
  },
  "styles": {
    "label": {
      "color": "@eval({base.socials.follow.status} ? window.__themeState__.theme.themePrimary : 'white')"
    },
    "labelHovered": {
      "color": "@eval({base.socials.follow.status} && window.__themeState__.theme.redDark)"
    },
    "rootHovered": {
      "backgroundColor": "@eval({base.socials.follow.status} ? \"white\" : window.__themeState__.theme.themePrimary)",
      "borderColor": "@eval({base.socials.follow.status} && window.__themeState__.theme.redDark)"
    },
    "rootPressed": {
      "backgroundColor": "@eval({base.socials.follow.status} ? \"white\" : window.__themeState__.theme.themePrimary)",
      "borderColor": "@eval({base.socials.follow.status} && window.__themeState__.theme.redDark)"
    },
    "root": {
      "border": "2px solid",
      "borderColor": "@eval(window.__themeState__.theme.themePrimary)",
      "borderRadius": "4px",
      "height": "40px",
      "width": "@eval(window.innerWidth > 540 ? \"156px\" : \"100px\")",
      "backgroundColor": "@eval({base.socials.follow.status} ? 'white' : window.__themeState__.theme.themePrimary)"
    }
  }
}

Properties

type

Must be “PrimaryButton”.

  • Type: "PrimaryButton"

  • Required: Yes

text

Text that will show the button

hoverText

Text that will show the button when is hovered

iconProps

Icon props allows printing an icon inside the button

disabled

Allows disabling the button

  • Type: boolean

  • Required: No

styles

Allows adding styles for customizing the button

Overflow SetRelated Card