Loading Button custom design

Hi,

I want use a LoadingButton with a custom design, if I define the design for the button with Tailwind its will be overwrite by AtlasKit. The settings button and the delete button have the same CSS.

<LoadingButton
        onClick={() => {
          setIsDeleting(true);
          onDelete(key);
        }}
        title="delete"
        type="button"
        isLoading={isDeleting}
        // eslint-disable-next-line max-len
        className="flex text-lg w-1/12 justify-center items-center text-gray-600 hover:bg-gray-100 hover:cursor-pointer"
      >
        <TrashIcon label="delete" testId="list-cell-settings-delete" />
      </LoadingButton>

Bildschirmfoto 2022-04-05 um 20.49.31

Bildschirmfoto 2022-04-05 um 20.49.08

Thank you

I’m not sure what LoadingButton is and how I can help you.

This comes from AtlasKit from the UI Framework directly

import { LoadingButton } from '@atlaskit/button';

Link to Docu

LoadingButton doesn’t support className prop. https://atlassian.design/components/button/code#loading-button-props

To add custom styles to button check https://atlassian.design/components/button/theming-guide