# @bolttech/atoms-top-taglogin

> 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.

Latest version **0.17.2** (published 2026-06-08) · 0 weekly downloads

## Install

```sh
npm install @bolttech/atoms-top-taglogin
pnpm add @bolttech/atoms-top-taglogin
yarn add @bolttech/atoms-top-taglogin
bun add @bolttech/atoms-top-taglogin
```

## Health

**Score 50/100 (C)** — status: active.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.17.2 |
| Published | 2026-06-08 |
| First published | 2023-04-14 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 87.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andsfranbolt, danielkhalebbatista, pauloazevedo-ed, bruno.gomes, plinio.altoe, joaoteixeira20, esteve-cabrera, jabolttech, lucasvpaiva, herberts.fortuna, matheus.maciel.bolttech, silas.silva.bolttech |

## Links

- npm: https://www.npmjs.com/package/@bolttech/atoms-top-taglogin
- npm.io page: https://npm.io/package/@bolttech/atoms-top-taglogin

## Dependencies (6)

- [react](https://npm.io/package/react.md) 19.1.2
- [styled-components](https://npm.io/package/styled-components.md) 6.1.1
- [@bolttech/ui-utils](https://npm.io/package/@bolttech/ui-utils.md) 0.6.7
- [@bolttech/atoms-icon](https://npm.io/package/@bolttech/atoms-icon.md) 0.24.9
- [@bolttech/atoms-button](https://npm.io/package/@bolttech/atoms-button.md) 0.29.6
- [@bolttech/frontend-foundations](https://npm.io/package/@bolttech/frontend-foundations.md) 0.12.3

## Recent versions

- 0.17.2 (latest) — 2026-06-08
- 0.15.2 — 2026-04-09
- 0.17.0 — 2026-04-08
- 0.15.1 — 2025-08-04
- 0.15.0 — 2024-09-04
- 0.14.2 — 2024-03-04
- 0.14.1 — 2024-01-16
- 0.0.1 — 2024-01-16
- 0.14.0 — 2023-11-21
- 0.13.1 — 2023-11-07
- 0.13.0 — 2023-11-06
- 0.12.3 — 2023-09-22
- 0.12.2 — 2023-09-20
- 0.12.0 — 2023-09-05
- 0.11.0 — 2023-08-21
- … 20 more at https://npm.io/package/@bolttech/atoms-top-taglogin/versions

## README

# 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](#installation)
- [Usage](#usage)
- [Props](#props)
- [Example](#example)
- [Contributing](#contributing)

## Installation

To use the **TopTagLogin** component in your React application, follow these steps:

```bash
npm install @bolttech/frontend-foundations @bolttech/atoms-top-taglogin
```

or

```bash
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:

```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:

```jsx
<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.

---
_Source: https://npm.io/package/@bolttech/atoms-top-taglogin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._