@sajermann/react-button

Library created for implements super power in button.

Install

npm i @sajermann/react-button

Links

NPM Github

Props

type PropsFeedBack = {
	loadingOptions: {
		isLoading: boolean;
		typeLoadingIcon?: 'Default' | 'Points';
		customIcon?: JSX.Element;
		fullIcon?: boolean;
	};
	successOptions?: {
		success: boolean;
		customIcon?: JSX.Element;
		fullIcon?: boolean;
	};
	failedOptions?: {
		failed: boolean;
		customIcon?: JSX.Element;
		fullIcon?: boolean;
	};
};

interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
	startIcon?: JSX.Element;
	endIcon?: JSX.Element;
	containerIconsProps?: React.AllHTMLAttributes<HTMLDivElement>;
	containerInsideProps?: React.AllHTMLAttributes<HTMLDivElement>;
	containerChildrenProps?: React.AllHTMLAttributes<HTMLDivElement>;
	withFeedback?: PropsFeedBack;
}

Examples

Default

<Button>Default</Button>

Start Icon

<Button startIcon={<Icons.WhatsappLogo />}>Start Icon</Button>

End Icon

<Button endIcon={<Icons.TelegramLogo />}>End Icon</Button>

Start/End Icon

<Button
	startIcon={<Icons.YoutubeLogo />}
	endIcon={<Icons.YoutubeLogo />}
>
	Start/End Icon
</Button>

Is Loading Default

<Button
	disabled
	type="button"
	onClick={() => handleSave()}
	withFeedback={{
		loadingOptions: {
			isLoading: true,
		},
	}}
>
	Is Loading Default
</Button>

Is Loading Points

<Button
	disabled
	onClick={() => handleSave()}
	withFeedback={{
		loadingOptions: {
			isLoading: true,
			typeLoadingIcon: 'Points',
		},
	}}
>
	Is Loading Points
</Button>

Is Loading Full Icon

<Button
	disabled={isLoading}
	onClick={() => handleSave()}
	withFeedback={{
		loadingOptions: {
			isLoading,
			fullIcon: true,
		},
	}}
>
	Is Loading Full Icon
</Button>

Is Loading Custom Icon

<Button
	disabled={isLoading}
	onClick={() => handleSave()}
	withFeedback={{
		loadingOptions: {
			isLoading,
			customIcon: <Icons.CustomLoading />,
		},
	}}
>
	Is Loading Custom Icon
</Button>

With Feedback Success

<Button
	disabled={isLoading}
	onClick={handleSave}
	withFeedback={{
		loadingOptions: {
			isLoading,
		},
		successOptions: {
			success,
		},
	}}
>
	With Feedback Success
</Button>

With Feedback Success Full Icon

<Button
	disabled={isLoading}
	onClick={handleSave}
	withFeedback={{
		loadingOptions: {
			isLoading,
		},
		successOptions: {
			success,
			fullIcon: true,
		},
	}}
>
	With Feedback Success Full Icon
</Button>

With Feedback Success Custom Icon

<Button
	disabled={isLoading}
	onClick={handleSave}
	withFeedback={{
		loadingOptions: {
			isLoading,
		},
		successOptions: {
			success,
			customIcon: <Icons.TrendUp />,
		},
	}}
>
	With Feedback Success Custom Icon
</Button>

With Feedback Failed

<Button
	disabled={isLoading}
	onClick={handleSaveFailed}
	withFeedback={{
		loadingOptions: {
			isLoading,
		},
		failedOptions: {
			failed,
		},
	}}
>
	With Feedback Failed
</Button>

With Feedback Failed Full Icon

<Button
	disabled={isLoading}
	onClick={handleSaveFailed}
	withFeedback={{
		loadingOptions: {
			isLoading,
		},
		failedOptions: {
			failed,
			fullIcon: true,
		},
	}}
>
	With Feedback Failed Full Icon
</Button>

With Feedback Failed Custom Icon

<Button
	disabled={isLoading}
	onClick={handleSaveFailed}
	withFeedback={{
		loadingOptions: {
			isLoading,
		},
		failedOptions: {
			failed,
			customIcon: <Icons.TrendDown />,
		},
	}}
>
	With Feedback Failed Custom Icon
</Button>

Ellipsis

<Button
	disabled={isLoading}
	type="button"
	onClick={handleSave}
	withFeedback={{
		loadingOptions: {
			isLoading,
		},
		successOptions: {
			success,
		},
	}}
>
	Ellipsis - Lorem, ipsum dolor sit amet consectetur adipisicing elit.
	Accusantium vero delectus animi! Reprehenderit nostrum harum unde
	odio ex deleniti? Labore beatae dolorem quae nam velit nobis
	inventore blanditiis omnis a.
</Button>

Icon Button - Square

<Button
	disabled={isLoading}
	onClick={handleSave}
	withFeedback={{
		loadingOptions: {
			isLoading,
		},
		successOptions: {
			success,
		},
	}}
	endIcon={<Icons.WhatsappLogo />}
/>

Icon Button - Circle

<Button
	style={{
		minWidth: '50px',
		height: '50px',
		borderRadius: '50%',
		border: 'none',
	}}
	disabled={isLoading}
	onClick={handleSave}
	withFeedback={{
		loadingOptions: {
			isLoading,
			typeLoadingIcon: 'Points',
		},
		successOptions: {
			success,
		},
	}}
	endIcon={<Icons.TelegramLogo />}
/>