## Feature Examples ### Size - description:

Control button size with size prop:

  • large is best for calls to action that require more emphasis.
  • medium is for main page actions and common use cases.
  • small fits into smaller UI elements like cards and widgets.
  • tiny is used for dense layouts.
    • - example: ```jsx ; ``` ### Skin - description:

    Change the appearance of a button with a skin prop.

  • standard is for general primary actions.
  • light is for primary actions that are on dark backgrounds.
  • destructive is only for actions that have a destructive effect on user data, like delete.
  • premium is for actions that prompt users to upgrade their plans to premium subscription.
  • premium-light is best for upgrade actions that appear on dark backgrounds.
  • dark should be used with buttons on backgrounds with colors.
  • transparent is for general actions on backgrounds with vivid colors or images.
  • ai should be used with AI based features.

    • Each action can be primary or secondary. There should only be one primary action per page.

    Note: Secondary buttons should be used alongside primary buttons for less utilized actions, such as cancel or back.

    - example: ```jsx ; ``` ### Affix - description:

    Add more context to actions with affix icons:

  • Emphasize the button action with a prefixIcon.
  • Indicate that an action will open a popover or navigate users to another page with a suffixIcon.
    • - example: ```jsx ; ``` ### Disabled - description:

    To disable a button, use the disabled prop which indicates a button can't be selected.

    - example: ```jsx ``` ### Text overflow - description:

    Use the ellipsis prop for overflow text. The full text will be displayed in a when a user hovers over the button. Control the style of the tooltip using the tooltipProps.

    Note: Try to avoid lengthy action labels. CTA text should be short and clear – one to two words, or max three for specific use cases.

    - example: ```jsx ; ``` ### Full width - description:

    When working on mobile designs, use the fullWidth prop to fill the button to 100% of the parent container.

    - example: ```jsx ``` ## Developer Examples ### Custom HTML tag - description:

    Render buttons as any given HTML tag with the as prop. For example, they can be rendered as:

  • when attributes like href, target, etc., are needed.
  • when props like to, replace, etc. are needed.

    • All attributes will be passed to the rendered HTML tag.

    - example: ```jsx () => { const ReactRouterLink = props =>
    ; return ( ); }; ``` ## Common Use Case Examples ### Loading state - description:

    When an action is delayed and still loading, use instead of a label on the button.

    - example: ```jsx } secondaryButtonText="Cancel" onCloseButtonClick={() => {}} title="Add menu" > ; ``` ### Main action of a panel - description:

    Place the primary CTA button in the to make sure it is always clearly visible to the user.

    - example: ```jsx {}} skin="floating" width="288px" height="576px" > Color }], dragHandleSize: 'small', }, { id: 2, options: [{ value: Price }], dragHandleSize: 'small', }, { id: 3, options: [{ value: Size }], dragHandleSize: 'small', }, { id: 4, options: [{ value: Collections }], dragHandleSize: 'small', }, ]} onChange={() => {}} /> ; ```