## Feature Examples ### Size - description:

Update the dimensions of a button with the size prop.

  • large is for onboarding flows and marketing pages where the action needs more emphasis.
  • medium is the default for all common cases.
  • small is for icon buttons used in cards and widgets.
  • tiny is for small and dense layouts.

    • Note: small and tiny size buttons should use the small icon size (18x18).

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

    Change the button's appearance with the skin prop.

  • standard is the default for all general actions.
  • light is for dark backgrounds.
  • transparent is for backgrounds with colors or images.
  • premium is for actions that prompt users to upgrade their plans.
  • dark should be used with buttons on backgrounds with colors.
  • ai should be used with AI based features.

    • Each action can be primary, secondary or tertiary, depending on priority. 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 ; ``` ### Disabled - description:

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

    - 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 are needed.
  • when props like to, replace, etc. are needed.

    • All attributes will be passed to the rendered element.

    - example: ```jsx () => { const ReactRouterLink = props =>
    ; return ( {' tag'} {'React router tag'} {'Native ); return ( {renderImage()} {renderContent()} ); }; ``` ### Low priority actions - description:

    Use icon buttons for lower-priority actions that have no effect on the main user flow. For example, to change the cover image of an audio.

    - example: ```jsx {}} skin="floating" width="288px">
    ; ```