Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Codefied-CodePix/KaroCar-platform/llms.txt

Use this file to discover all available pages before exploring further.

The Button component is a client-side React button that displays an alert with the consuming app’s name on click. It accepts a required appName prop to identify the calling application, making it easy to trace which app surfaced the interaction during development. Because it calls the browser’s alert API, it is marked with the "use client" directive and must be rendered in a client component context.

​
TypeScript interface

interface ButtonProps {
  children: ReactNode;
  className?: string;
  appName: string;
}

​
Props

​
children
ReactNode
required
The content rendered inside the button element — typically a text label or icon.
​
className
string
One or more CSS class names applied to the underlying <button> element. Use this to apply Tailwind utility classes or any custom styles from the consuming app.
​
appName
string
required
The name of the application consuming the component. This value is interpolated into the alert message: Hello from your ${appName} app!

​
Usage

import { Button } from '@karo-car/ui';

export default function Page() {
  return <Button appName="Admin">Click me</Button>;
}

​
Source code

"use client";

import { ReactNode } from "react";

interface ButtonProps {
  children: ReactNode;
  className?: string;
  appName: string;
}

export const Button = ({ children, className, appName }: ButtonProps) => {
  return (
    <button
      className={className}
      onClick={() => alert(`Hello from your ${appName} app!`)}
    >
      {children}
    </button>
  );
};
Button is decorated with the "use client" directive because its onClick handler calls the browser-only alert API. It cannot be rendered as a React Server Component — ensure any page or layout that includes it is itself a client component, or wrap it in a dedicated client boundary.
The Button component is used in both the admin and vendor apps. When adding it to a new app, pass a descriptive appName string (e.g. "Vendor", "Corporate") so alert messages remain identifiable during local development.

Build docs developers (and LLMs) love

Get started for freeTalk to us