@cognam/btn-container v1.0.0

BtnContainer

A simple, reusable React component for grouping and aligning buttons, styled using Material-UI (@mui/styles). Perfect for toolbars, forms, and dialog actions.

✨ Features

• Easy Alignment – Right-aligns its children by default.
• Composable – Use with any buttons or elements.
• Customizable – Accepts custom className and style props.
• Lightweight – No extra dependencies beyond React and Material-UI styles.

📦 Installation

npm install @cognam/btn-container

Peer dependencies:

• react (^17.0.0 || ^18.0.0)
• react-dom (^17.0.0 || ^18.0.0)
• @mui/styles (^5.14.10)

🚀 Usage

import React from "react";
import BtnContainer from "@cognam/btn-container";
import Button from "@mui/material/Button";

function Example() {
  return (
    <BtnContainer>
      <Button variant="contained" color="primary">
        Save
      </Button>
      <Button variant="outlined" color="secondary">
        Cancel
      </Button>
    </BtnContainer>
  );
}

🛠️ Props

🎨 Styling

• The container aligns its children to the right and adds a top margin.
• You can override or extend the styles via className or style props.

📚 Example

<BtnContainer style={{ marginTop: 40 }}>
  <Button>First</Button>
  <Button>Second</Button>
</BtnContainer>

🧩 Integration

This component is designed to work seamlessly with Material-UI but can be used with any React buttons or elements.

Happy coding! 🚀