Carregando…

Floating Growing Banner

Feedback

Compact pill that grows into an email capture field on hover/focus.

Floating Growing Banner — hover ou foque pra expandir o campo de e-mail

Subscribe to the newsletter

Enter your email

Instalação via CLI

$ npx kikitocn add floating-growing-banner

Interno:

@/lib/utils

Exemplo de uso

Floating Growing BannerExample.tsx

import { FloatingGrowingBanner } from "@/components/ui/cn/floating-growing-banner/FloatingGrowingBanner";

export function FloatingGrowingBannerExample() {
  return (
    <FloatingGrowingBanner />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`label`	`string`	`'Subscribe to the newsletter'`	Texto quando fechada
`inputLabel`	`string`	`'Enter your email'`	Label do campo ao expandir
`placeholder`	`string`	`'email@example.com'`	Placeholder do campo
`onSubmit`	`(email: string) => void`	`undefined`	Chamado com o e-mail digitado ao enviar
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Feedback

Carregando…