Skip to content

Button Component

Description

The Button component provides a customizable button with multiple variants and props.
It supports different styles, icons, full-width mode, and disabled states.

Props

Prop Type Description
variant "contained", "outlined", "text" Defines the button style
fullWidth boolean If true, the button spans the full container width
disabled boolean If true, the button is disabled
startIcon ReactNode, React.ElementType Icon displayed before button text
endIcon ReactNode, React.ElementType Icon displayed after button text
color string Custom color for the button text
href string If provided, renders the button as a link
target "_blank", "_self", "_parent", "_top" Defines link target behavior
rel string Specifies the relationship between the link and target
badgeContent ReactNode Adds a small badge (for notifications, counts, etc.)
badgeColor string Defines badge background color

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Button } from "@nomana-it/liberty-core"
import { FaCheck } from "react-icons/fa";

export const ButtonExample = () => {
  return (
    <>
      {/* Default Contained Button */}
      <Button variant="contained" onClick={() => alert("Contained Button Clicked")}>
        Contained Button
      </Button>

      {/* Outlined Button */}
      <Button variant="outlined" color="secondary" onClick={() => alert("Outlined Button Clicked")}>
        Outlined Button
      </Button>

      {/* Button with Icon */}
      <Button startIcon={<FaCheck />} variant="contained">
        With Icon
      </Button>

      {/* Disabled Button */}
      <Button disabled>Disabled Button</Button>

      {/* Full Width Button */}
      <Button fullWidth variant="contained">Full Width Button</Button>
    </>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core