Background color doesn't apply on pending state
Unanswered
Horned oak gall posted this in #help-forum
Horned oak gallOP
const SubmitButton = () => {
const { pending } = useFormStatus()
return (
#Unknown Channel
<button className={
</>
)
}
const TaskForm = () => {
return (
<form action={createTask}>
<div className='join w-full'>
<input className='input input-bordered join-item w-full' type='text' placeholder='Add a new task' name='taskName' required />
</div>
<SubmitButton />
</form>
)
}
export default TaskForm
const { pending } = useFormStatus()
return (
#Unknown Channel
<button className={
${pending ? "btn bg-red-500 join-item" : "btn-primary btn join-item "}} type='submit' disabled={pending}>{pending ? "Pending" : "Add Task"}</button></>
)
}
const TaskForm = () => {
return (
<form action={createTask}>
<div className='join w-full'>
<input className='input input-bordered join-item w-full' type='text' placeholder='Add a new task' name='taskName' required />
</div>
<SubmitButton />
</form>
)
}
export default TaskForm
7 Replies
Horned oak gallOP
<button className={
${pending ? "bg-red-600" : "btn-primary btn join-item "}} type='submit' disabled={pending}>This way works
<button className={
${pending ? "btn btn-secondary join-item" : "btn-primary btn join-item "}} type='submit' disabled={pending}>{pending ? "Pending" : "Add Task"}</button>This way doesn't work
works if disabled removed
any alternative?
Horned oak gallOP
&913086567042674719 base;
&913086567042674719 components;
&913086567042674719 utilities;
button:disabled{
@apply bg-red-500 text-white cursor-not-allowed !important;
}
&913086567042674719 components;
&913086567042674719 utilities;
button:disabled{
@apply bg-red-500 text-white cursor-not-allowed !important;
}