Toast without Icon
An toast element without icon
Example
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
example.tsx
function XIcon() {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth={1.5}
stroke='currentColor'
className='size-4 relative -right-2 -top-2 ml-[-10px]'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M6 18 18 6M6 6l12 12'
/>
</svg>
);
}
export function Toast() {
return (
<div className='rounded-[10px] bg-[#111111] border-2 border-[#27272A] px-5 py-3 gap-[10px] flex items-center justify-center focus-within:border-2 transition-colors min-w-max'>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<XIcon />
</div>
);
}
Toast with Icon
An toast element with icon
Example
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
example.tsx
function Icon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
)
}
function XIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-4 relative -right-2 -top-2 ml-[-10px]">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
)
}
export function Toast() {
return (
<div className="rounded-[10px] bg-[#111111] border-2 border-[#27272A] px-5 py-3 gap-[10px] flex items-center justify-center focus-within:border-2 transition-colors min-w-max">
<Icon />
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<XIcon />
</div>
);
}Success Toast
An Success toast element without fill
Example
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
example.tsx
function Icon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
)
}
function XIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-4 relative -right-2 -top-2 ml-[-10px]">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
)
}
export function Toast() {
return (
<div className="rounded-[10px] bg-[#111111] border-2 border-[#2E7D32] px-5 py-3 gap-[10px] flex items-center justify-center focus-within:border-2 transition-colors max-w-max text-[#4CAF50]">
<Icon />
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<XIcon />
</div>
);
}Success Toast with Fill
An Success toast element with fill
Example
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
example.tsx
function Icon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
)
}
function XIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-4 relative -right-2 -top-2 ml-[-10px]">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
)
}
export function Toast() {
return (
<div className="rounded-[10px] bg-[#2E7D32] border-2 border-[#2E7D32] px-5 py-3 gap-[10px] flex items-center justify-center focus-within:border-2 transition-colors max-w-max">
<Icon />
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<XIcon />
</div>
);
}Error Toast
An Error toast element without fill
Example
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
example.tsx
function Icon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
)
}
function XIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-4 relative -right-2 -top-2 ml-[-10px]">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
)
}
export function Toast() {
return (
<div className="rounded-[10px] bg-[#111111] border-2 border-[#D32F2F] px-5 py-3 gap-[10px] flex items-center justify-center focus-within:border-2 transition-colors max-w-max text-[#D32F2F]">
<Icon />
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<XIcon />
</div>
);
}Error Toast with Fill
An Error toast element with fill
Example
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
example.tsx
function Icon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
)
}
function XIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-4 relative -right-2 -top-2 ml-[-10px]">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
)
}
export function Toast() {
return (
<div className="rounded-[10px] bg-[#D32F2F] border-2 border-[#D32F2F] px-5 py-3 gap-[10px] flex items-center justify-center focus-within:border-2 transition-colors max-w-max">
<Icon />
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<XIcon />
</div>
);
}
