Sign-in Modals

Set up

Import SignInModal, ModalButton components and set variables in the script tag.

import { SignInModal, ModalButton } from "flowbite-svelte";

Examples

Create a button and modal.

 <ModalButton
    id="signin1"
    btnName="Sign In Modal"
    btnColor="green"
/>
<SignInModal
  id="signin1"
  titleSignIn="SignIn Modal Title"
  lostPasswordLink="/"
  signUpLink="/about"
  formLink="/modals"
/>

Props

The component has the following props, type, and default values. See types page for type information.

ModalButton

Name	Type	Default
id	string	'modal-id'
btnName	string	'Modal Name'
btnColor	Colors	'blue'

SignInModal

Name	Type	Default
id	string	'signin-modal'
btnSignInColor	Colors	'blue'
titleSignIn	string	'Sign in to our platform'
lostPasswordLink	string
rememberMe	date	false
signUp	string
action	string
emailPlaceholder	string	'name@company.com'

Related components

References

Flowbite Modal