@bolttech/atoms-top-taglogin v0.14.2
Top Tag Login Component
The TopTagLogin component is a React component designed to display a top tag with login-related information. It can be used to create a visual element that invites users to perform a login action.
Table of Contents
Installation
To use the TopTagLogin component in your React application, follow these steps:
npm install @bolttech/frontend-foundations @bolttech/atoms-top-taglogin
or
yarn add @bolttech/frontend-foundations @bolttech/atoms-top-taglogin
Once you have the required dependencies installed, you can start using the TopTagLogin
component in your React application.
Usage
The TopTagLogin component provides a visually appealing way to display login-related information with a call-to-action button. This can be used to encourage users to perform a login action.
To use the component, import it and include it in your JSX:
import React from 'react';
import {TopTagLogin} from '@bolttech/atoms-top-taglogin';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // You can import your TopTagLogin component here
function App() {
const handleLogin = () => {
// Handle login action here
};
return (
<BolttechThemeProvider theme={bolttechTheme}>
<TopTagLogin
title="Log in to your account"
ctaLabel="Log in"
onClick={handleLogin}
icon="login"
dataTestId="login-section"
/>
</BolttechThemeProvider>
);
}
export default App;
Props
The TopTagLogin component accepts the following props:
Prop | Type | Description |
---|---|---|
dataTestId | string | The data-testid attribute for testing purposes. |
title | string | The title or label displayed in the top tag. |
ctaLabel | string | The label of the call-to-action button. |
onClick | () => void | The callback function to handle the button click event. |
icon | string | The icon to be displayed in the top tag. |
Example
Here's an example of using the TopTagLogin component:
<TopTagLogin
title="Log in to your account"
ctaLabel="Log in"
onClick={handleLogin}
icon="login"
dataTestId="login-section"
/>
This will render a top tag with the title "Log in to your account", a "Log in" call-to-action button, and a login icon.
Contributing
Contributions to the TopTagLogin component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.
2 months ago
4 months ago
4 months ago
9 months ago
8 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago