Primitives

Component Source Code

import { forwardRef, createElement, type ReactNode } from 'react';

type SButtonProps = JSX.IntrinsicElements['s-button'];

export type ButtonProps = Omit<SButtonProps, 'disabled' | 'loading'> & {
    /** Prevents clicking or receiving focus */
    disabled?: boolean;
    /** Shows loading indicator and disables button */
    loading?: boolean;
    /** Content of the button */
    children?: ReactNode;
};

/**
 * Button component - triggers actions or events.
 *
 * @see https://shopify.dev/docs/api/app-home/polaris-web-components/actions/button
 *
 * @example
 * <Button variant="primary">Save</Button>
 * <Button variant="secondary" tone="critical">Delete</Button>
 */
export const Button = forwardRef<HTMLElement, ButtonProps>(
    ({ children, disabled, loading, ...props }, ref) => {
        return createElement(
            's-button',
            {
                ref,
                ...props,
                disabled: disabled || undefined,
                loading: loading || undefined,
            },
            children
        );
    }
);

Button.displayName = 'Button';

Component Source Code

import { forwardRef, createElement } from 'react';

type Props = JSX.IntrinsicElements['s-chip'];

export const Chip = forwardRef<HTMLElement, Props>((props, ref) => createElement('s-chip', { ref, ...props }));

Chip.displayName = 'Chip';