## 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 ; ``` ### Priority - description:

    Each button has a priority that signals its importance. Use it to create a clear visual hierarchy across actions on the page.

  • primary is the main call-to-action.
  • secondary is for supporting actions alongside a primary (e.g. Cancel, Back).
  • tertiary is for low-emphasis actions; use when secondary would still feel too prominent.

    • Note: There should only be one primary button per page.

    - 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.
    • - 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={() => {}} /> ; ``` ### Priority of actions - description:

    Not all actions are equal. Ranking them visually tells users what to do first, what's optional, and what's just there if they need it.

    - example: ```jsx () => ( Publishing will make all changes visible to your visitors. ); ``` ### Disabled state - description:

    Disable the primary button when required fields are missing, and automatically enable it once all inputs are completed.

    - example: ```jsx () => { const [name, setName] = React.useState(''); const [email, setEmail] = React.useState(''); const isReady = name.trim().length > 0 && email.includes('@'); return ( setName(e.target.value)} /> setEmail(e.target.value)} /> ); }; ```