daisyui css 송금 버튼 만들기

송금버튼을 클릭하면 송금글자가 사라지고 loading-dot 아이콘이 뜬다. 이외에도 로딩 아이콘이 다양하다.
 
https://daisyui.com/components/loading/

Tailwind Loading Component — Tailwind CSS Components ( version 4 update is here )

 
 
useToggle 커스텀 훅을 넣어 조건부랜더링으로 토글버튼의 상태값을 다르게 구현하였다.
 
1.  true일때 로딩 아이콘이 뜬다.
2. false일때 송금버튼이 뜬다.
 

import { useToggle } from '../hooks';

export default function Test() {
    const [loading, setLoading] = useToggle();

    return (
        <div className='mt-4 ml-4'>
            <button onClick={setLoading} className='btn btn-primary'>
            // 조건부 랜더링 
            {loading ? <div className="btn-circle loading loading-dots"></div> : '송금'}
            </button>
        </div>
    );
}

 
 
 
출력화면
 
1. 클릭전

false 상태

 
 
 
2. 클릭 후 
 

true 상태