Skip to main content

Button, ButtonEnums

Reference​

  • The Button component is designed to render a customizable button.
  • It supports various appearances, sizes, and styles. It is designed to be flexible for different use cases, such as primary buttons, links, or subtle buttons.

Props​

  • text (optional): A string that represents the text displayed inside the button.
  • title (optional): A string that sets the title attribute of the button, typically used for accessibility or tooltips.
  • disabled (default: false): A boolean that disables the button when set to true.
  • appearance (default: ButtonEnums.Appearance.Default): Determines the visual style of the button. Accepts one of the values defined in ButtonEnums.Appearance: Default, Primary, Link, LinkDark, Subtle, SubtleLink, Transparent, TransparentWithHover.
  • onClick(optional): A function that is triggered when the button is clicked.
  • size (optional): Determines the size of the button. Accepts one of the values defined in ButtonEnums.Size: Small, Medium, Large.
  • outline (optional): A boolean that, when true, applies an outline style to the button by appending -outline to the appearance class.
  • children (optional): React nodes that can be passed as children to the button. If provided, they are wrapped in a Box component with padding.
  • type (default: 'button'): Specifies the type attribute of the button (e.g., 'button', 'submit', 'reset').
  • style (optional): Inline styles applied directly to the <button> element.
  • textStyle (optional): Inline styles applied to the <span> element that wraps the text prop.
  • buttonStyle:Inline styles applied to the Box component wrapping the button content.

ButtonEnums​

  • The ButtonEnums object defines constants for the button's appearance, size, and padding:
  • ButtonEnums object value is as below. so we can access its like ButtonEnums.Apperance.Primary
{
  Appearance: {
    Default: 'btn-default',
    Primary: 'btn-primary',
    Link: 'btn-link',
    LinkDark: 'btn-link-dark',
    Subtle: 'btn-subtle',
    SubtleLink: 'btn-subtle-link',
    Transparent: 'btn-transparent',
    TransparentWithHover: 'btn-transparent-with-bg',
  },
  Size: {
    Small: 'small',
    Medium: 'medium',
    Large: 'large',
  },
  Padding: {
    Default: '0',
    Small: '0.25rem',
    Medium: '0.4rem',
    Large: '0.55rem',
  },
};

  • Appearance:​

  • Defines the visual styles for the button

  • Size:​

  • Defines the size options for the button (e.g., small, medium, large).

  • Padding:​

  • Defines padding values for the button content based on the size.

Usage Example​

const { protrakComponents } = React.useContext(customWidgetContext);
const { Button, ButtonEnums } = protrakComponents;

return(
    <div>
      <Button
        text="Click Me"
        appearance={ButtonEnums.Appearance.Primary}
        size={ButtonEnums.Size.Medium}
        onClick={() => alert('Button clicked!')}
        outline={true}
        style={{ margin: '10px' }}
      />
    </div>
);

UI​

Button