# @bolttech/atoms-footer

> A React component to display a footer section with call-to-action buttons.

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

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

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

## Facts

| | |
|---|---|
| Version | 0.23.3 |
| Published | 2026-06-08 |
| First published | 2023-04-03 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 268.4 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-footer
- npm.io page: https://npm.io/package/@bolttech/atoms-footer

## Dependencies (6)

- [react](https://npm.io/package/react.md) 19.1.2
- [@bolttech/divider](https://npm.io/package/@bolttech/divider.md) 0.22.3
- [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-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.23.3 (latest) — 2026-06-08
- 0.23.2 — 2026-06-03
- 0.23.0 — 2026-04-08
- 0.21.1 — 2026-03-17
- 0.21.0 — 2024-09-04
- 0.20.0 — 2024-09-02
- 0.19.0 — 2024-06-17
- 0.18.2 — 2024-01-17
- 0.18.1 — 2024-01-16
- 0.0.1 — 2024-01-16
- 0.18.0 — 2023-11-21
- 0.17.2 — 2023-11-09
- 0.17.1 — 2023-11-07
- 0.17.0 — 2023-11-06
- 0.16.4 — 2023-09-22
- … 40 more at https://npm.io/package/@bolttech/atoms-footer/versions

## README

## FooterCtas Component

A React component to display a footer section with call-to-action buttons.

### Installation

Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install the component.

```bash
npm install @bolttech/frontend-foundations @bolttech/atoms-footer
```

or

```bash
yarn add @bolttech/frontend-foundations @bolttech/atoms-footer
```

### Props

The `FooterCtas` component accepts the following properties:

| Prop            | Type       | Description                                                          |
|-----------------|------------|----------------------------------------------------------------------|
| copyRightInfo   | `string`   | The copyright information for the footer.                           |
| imgLogo         | `string` or `element` | An image URL or an element to be displayed as the footer logo. |
| labelLogo       | `string`   | The label text for the footer logo.                                 |
| labelLinks      | `array`    | An array of objects containing `label` and `link` properties.       |
| dataTestId      | `string`   | The `data-testid` attribute for testing.                             |

### Usage

```jsx
import React from 'react';
import {FooterCtas} from '@bolttech/atoms-footer';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const labelLinks = [
    {label: 'Home', link: '/'},
    {label: 'About', link: '/about'},
    {label: 'Contact', link: '/contact'},
  ];

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <FooterCtas
        copyRightInfo="© 2023 Your Company. All Rights Reserved."
        imgLogo="https://example.com/logo.png"
        labelLogo="Your Company"
        labelLinks={labelLinks}
        dataTestId="custom-footer"
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;
```

## FooterStack Component

A React component to display a stacked footer section with informational content.

### Installation

Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install the component.

```bash
npm install @bolttech/frontend-foundations @bolttech/atoms-footer
```

or

```bash
yarn add @bolttech/frontend-foundations @bolttech/atoms-footer
```

### Props

The `FooterStack` component accepts the following properties:

| Prop                  | Type       | Description                                                      |
|-----------------------|------------|------------------------------------------------------------------|
| copyRightInfo         | `string`   | The copyright information for the footer.                       |
| imgLogo               | `string` or `element` | An image URL or an element to be displayed as the footer logo. |
| labelLogo             | `string`   | The label text for the footer logo.                             |
| oicInfo               | `object`   | An object containing `label` and `value` properties.            |
| dbdInfo               | `object`   | An object containing `label` and `value` properties.            |
| securityCompliances   | `object`   | An object containing `label` and `imgLogo` properties.         |
| dataTestId            | `string`   | The `data-testid` attribute for testing.                         |

### Usage

```jsx
import React from 'react';
import {FooterStack} from '@bolttech/atoms-footer';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const oicInfo = {
    label: 'OIC Info',
    value: 'Some value related to OIC',
  };

  const dbdInfo = {
    label: 'DBD Info',
    value: 'Some value related to DBD',
  };

  const securityCompliances = {
    label: 'Security Compliances',
    imgLogo: 'https://example.com/security-logo.png',
    imgLogo2: 'https://example.com/security-logo2.png',
    imgLogo3: 'https://example.com/security-logo3.png',
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <FooterStack
        copyRightInfo="© 2023 Your Company. All Rights Reserved."
        imgLogo="https://example.com/logo.png"
        labelLogo="Your Company"
        oicInfo={oicInfo}
        dbdInfo={dbdInfo}
        securityCompliances={securityCompliances}
        dataTestId="custom-footer-stack"
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;
```

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