Examples
Props
LoginPage
Name | Type | Default | Description |
---|---|---|---|
loginTitlerequired | string | Title for the Login Main Body Header of the LoginPage | |
backgroundImgAlt | string | '' | Attribute that specifies the alt text of the background image for the LoginPage. |
backgroundImgSrc | string | BackgroundImageSrcMap | '' | Attribute that specifies the URL of the background image for the LoginPage |
brandImgAlt | string | '' | Attribute that specifies the alt text of the brand image for the LoginPage. |
brandImgSrc | string | '' | Attribute that specifies the URL of the brand image for the LoginPage |
children | React.ReactNode | null | Anything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>) |
className | string | '' | Additional classes added to the LoginPage. |
footerListItems | React.ReactNode | null | Items rendered inside of the Footer List Component of the LoginPage |
footerListVariants | ListVariant.inline | Adds list variant styles for the Footer List component of the LoginPage. The only current value is'inline' | |
forgotCredentials | React.ReactNode | null | Content rendered inside of Login Main Footer Band to display a forgot credentials link* |
loginSubtitle | string | Subtitle for the Login Main Body Header of the LoginPage | |
signUpForAccountMessage | React.ReactNode | null | Content rendered inside of Login Main Footer Band to display a sign up for account message |
socialMediaLoginContent | React.ReactNode | null | Content rendered inside of Social Media Login footer section . |
textContent | string | '' | Content rendered inside of the Text Component of the LoginPage |
Login
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered inside the main section of the login layout |
className | string | '' | Additional classes added to the login layout |
footer | React.ReactNode | null | Footer component (e.g. <LoginFooter />) |
header | React.ReactNode | null | Header component (e.g. <LoginHeader />) |
LoginForm
Name | Type | Default | Description |
---|---|---|---|
className | string | '' | Additional classes added to the Login Main Body's Form |
helperText | React.ReactNode | null | Content displayed in the Helper Text component * |
helperTextIcon | React.ReactNode | null | Icon displayed to the left in the Helper Text |
hidePasswordAriaLabel | string | 'Hide password' | Accessible label for the hide password button |
isLoginButtonDisabled | boolean | false | Flag indicating if the Login Button is disabled |
isRememberMeChecked | boolean | false | Flag indicating if the remember me Checkbox is checked. |
isShowPasswordEnabled | boolean | false | Flag indicating if the user can toggle hiding the password |
isValidPassword | boolean | true | Flag indicating if the Password is valid |
isValidUsername | boolean | true | Flag indicating if the Username is valid |
loginButtonLabel | string | 'Log In' | Label for the Log in Button Input |
noAutoFocus | boolean | false | Flag to indicate if the first dropdown item should not gain initial focus |
onChangePassword | (value: string, event: React.FormEvent<HTMLInputElement>) => void | () => undefined as any | Function that handles the onChange event for the Password |
onChangeRememberMe | (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void | () => undefined as any | Function that handles the onChange event for the Remember Me Checkbox |
onChangeUsername | (value: string, event: React.FormEvent<HTMLInputElement>) => void | () => undefined as any | Function that handles the onChange event for the Username |
onLoginButtonClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | () => undefined as any | Function that is called when the Login button is clicked |
passwordLabel | string | 'Password' | Label for the Password Input Field |
passwordValue | string | '' | Value for the Password |
rememberMeLabel | string | '' | Label for the Remember Me Checkbox that indicates the user should be kept logged in. If the label is not provided, the checkbox will not show. |
showHelperText | boolean | false | Flag indicating the Helper Text is visible * |
showPasswordAriaLabel | string | 'Show password' | Accessible label for the show password button |
usernameLabel | string | 'Username' | Label for the Username Input Field |
usernameValue | string | '' | Value for the Username |
LoginMainBody
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered inside the Login Main Body |
className | string | '' | Additional classes added to the Login Main Body |
LoginMainHeader
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered inside the Login Main Header |
className | string | '' | Additional classes added to the Login Main Header |
subtitle | string | '' | Subtitle that contains the Text, URL, and URL Text for the Login Main Header |
title | string | '' | Title for the Login Main Header |
LoginHeader
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered inside the header of the login layout |
className | string | '' | Additional classes added to the login header |
headerBrand | React.ReactNode | null | Header Brand component (e.g. <LoginHeader />) |
LoginFooter
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered inside the footer of the login layout |
className | string | '' | Additional props are spread to the container <footer> |
LoginMainFooter
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered inside the Login Main Footer |
className | string | '' | Additional classes added to the Login Main Footer |
forgotCredentials | React.ReactNode | null | Content rendered inside of Login Main Footer Band do display a forgot credentials link* |
signUpForAccountMessage | React.ReactNode | null | Content rendered inside of Login Main Footer Band to display a sign up for account message |
socialMediaLoginContent | React.ReactNode | null | Content rendered inside the Login Main Footer as Social Media Links* |
LoginFooterItem
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered inside the footer Link Item |
className | string | Additional classes added to the Footer Link Item | |
href | string | '#' | The URL of the Footer Link Item |
target | string | '_blank' | Specifies where to open the linked document |
LoginMainFooterBandItem
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered inside the footer Link Item |
className | string | '' | Additional classes added to the Footer Link Item |
LoginMainFooterLinksItem
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered inside the footer Link Item |
className | string | '' | Additional classes added to the Footer Link Item |
href | string | '' | HREF for Footer Link Item |
linkComponent | React.ReactNode | 'a' | Component used to render the Footer Link Item |
linkComponentProps | any | Props for the LinkComponent | |
target | string | '' | Target for Footer Link Item |
CSS variables
.pf-c-login__footer | --pf-global--Color--100 | #fff | |
.pf-c-login__footer | --pf-global--Color--200 | #f0f0f0 | |
.pf-c-login__footer | --pf-global--BorderColor--100 | #b8bbbe | |
.pf-c-login__footer | --pf-global--primary-color--100 | #73bcf7 | |
.pf-c-login__footer | --pf-global--link--Color | #2b9af3 | |
.pf-c-login__footer | --pf-global--link--Color--hover | #2b9af3 | |
.pf-c-login__footer | --pf-global--BackgroundColor--100 | #151515 | |
.pf-c-login__footer .pf-c-card | --pf-c-card--BackgroundColor | rgba(#030303, .32) | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-primary--Color | #06c | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-primary--hover--Color | #06c | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-primary--focus--Color | #06c | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-primary--active--Color | #06c | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-primary--BackgroundColor | #fff | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-primary--hover--BackgroundColor | #f0f0f0 | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-primary--focus--BackgroundColor | #f0f0f0 | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-primary--active--BackgroundColor | #f0f0f0 | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-secondary--Color | #fff | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-secondary--hover--Color | #fff | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-secondary--focus--Color | #fff | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-secondary--active--Color | #fff | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-secondary--BorderColor | #fff | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-secondary--hover--BorderColor | #fff | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-secondary--focus--BorderColor | #fff | |
.pf-c-login__footer .pf-c-button | --pf-c-button--m-secondary--active--BorderColor | #fff | |
.pf-c-login | --pf-c-login--PaddingTop | 1.5rem | |
.pf-c-login | --pf-c-login--PaddingBottom | 1.5rem | |
.pf-c-login | --pf-c-login--xl--BackgroundImage | none | |
.pf-c-login | --pf-c-login__container--xl--GridColumnGap | 4rem | |
.pf-c-login | --pf-c-login__container--MaxWidth | 31.25rem | |
.pf-c-login | --pf-c-login__container--xl--MaxWidth | none | |
.pf-c-login | --pf-c-login__container--PaddingLeft | 6.125rem | |
.pf-c-login | --pf-c-login__container--PaddingRight | 6.125rem | |
.pf-c-login | --pf-c-login__container--xl--GridTemplateColumns | 34rem minmax(auto, 34rem) | |
.pf-c-login | --pf-c-login__header--MarginBottom | 1rem | |
.pf-c-login | --pf-c-login__header--PaddingLeft | 1rem | |
.pf-c-login | --pf-c-login__header--PaddingRight | 1rem | |
.pf-c-login | --pf-c-login__header--xl--MarginBottom | 3rem | |
.pf-c-login | --pf-c-login__header--xl--MarginTop | 4rem | |
.pf-c-login | --pf-c-login__header--c-brand--MarginBottom | 1.5rem | |
.pf-c-login | --pf-c-login__header--c-brand--xl--MarginBottom | 3rem | |
.pf-c-login | --pf-c-login__main--BackgroundColor | #fff | |
.pf-c-login | --pf-c-login__main--MarginBottom | 1.5rem | |
.pf-c-login | --pf-c-login__main-header--PaddingTop | 3rem | |
.pf-c-login | --pf-c-login__main-header--PaddingRight | 2rem | |
.pf-c-login | --pf-c-login__main-header--PaddingBottom | 1rem | |
.pf-c-login | --pf-c-login__main-header--PaddingLeft | 2rem | |
.pf-c-login | --pf-c-login__main-header--md--PaddingRight | 3rem | |
.pf-c-login | --pf-c-login__main-header--md--PaddingLeft | 3rem | |
.pf-c-login | --pf-c-login__main-header--ColumnGap | 1rem | |
.pf-c-login | --pf-c-login__main-header--RowGap | 1rem | |
.pf-c-login | --pf-c-login__main-header-desc--MarginBottom | 0.5rem | |
.pf-c-login | --pf-c-login__main-header-desc--md--MarginBottom | 0 | |
.pf-c-login | --pf-c-login__main-header-desc--FontSize | 0.875rem | |
.pf-c-login | --pf-c-login__main-body--PaddingRight | 2rem | |
.pf-c-login | --pf-c-login__main-body--PaddingBottom | 2rem | |
.pf-c-login | --pf-c-login__main-body--PaddingLeft | 2rem | |
.pf-c-login | --pf-c-login__main-body--md--PaddingRight | 3rem | |
.pf-c-login | --pf-c-login__main-body--md--PaddingLeft | 3rem | |
.pf-c-login | --pf-c-login__main-footer--PaddingBottom | 4rem | |
.pf-c-login | --pf-c-login__main-footer--c-title--MarginBottom | 1rem | |
.pf-c-login | --pf-c-login__main-footer-links--PaddingTop | 0.5rem | |
.pf-c-login | --pf-c-login__main-footer-links--PaddingRight | 4rem | |
.pf-c-login | --pf-c-login__main-footer-links--PaddingBottom | 2rem | |
.pf-c-login | --pf-c-login__main-footer-links--PaddingLeft | 4rem | |
.pf-c-login | --pf-c-login__main-footer-links-item--PaddingRight | 1rem | |
.pf-c-login | --pf-c-login__main-footer-links-item--PaddingLeft | 1rem | |
.pf-c-login | --pf-c-login__main-footer-links-item--MarginBottom | 0.5rem | |
.pf-c-login | --pf-c-login__main-footer-links-item-link-svg--Fill | #6a6e73 | |
.pf-c-login | --pf-c-login__main-footer-links-item-link-svg--Width | 1.5rem | |
.pf-c-login | --pf-c-login__main-footer-links-item-link-svg--Height | 1.5rem | |
.pf-c-login | --pf-c-login__main-footer-links-item-link-svg--hover--Fill | #151515 | |
.pf-c-login | --pf-c-login__main-footer-band--PaddingTop | 1.5rem | |
.pf-c-login | --pf-c-login__main-footer-band--PaddingRight | 1rem | |
.pf-c-login | --pf-c-login__main-footer-band--PaddingBottom | 1.5rem | |
.pf-c-login | --pf-c-login__main-footer-band--PaddingLeft | 1rem | |
.pf-c-login | --pf-c-login__main-footer-band--BackgroundColor | #f0f0f0 | |
.pf-c-login | --pf-c-login__main-footer-band-item--PaddingTop | 1rem | |
.pf-c-login | --pf-c-login__footer--PaddingLeft | 1rem | |
.pf-c-login | --pf-c-login__footer--PaddingRight | 1rem | |
.pf-c-login | --pf-c-login__footer--c-list--PaddingTop | 1rem | |
.pf-c-login | --pf-c-login__footer--c-list--xl--PaddingTop | 3rem | |
View source on GitHub