update the button docs

README.md

@@ -11,7 +11,7 @@
  <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
  </a>
  <a href="https://github.com/creativetimofficial/material-tailwind/releases">
- <img src="https://img.shields.io/badge/version-2.1.6-blue.svg" alt="Version" />
+ <img src="https://img.shields.io/badge/version-2.1.7-blue.svg" alt="Version" />
  </a>
 </p>
 <p align="center">

docs-content/react/releases.ts

@@ -1,4 +1,24 @@
 export const releases = [
+ {
+ version: "2.1.7",
+ date: "December 14, 2023",
+ name: "@material-tailwind/react",
+ description: "Material Tailwind v2.1.7",
+ content: [
+ {
+ title: "patch changes",
+ data: [
+ "Add black color for <Button />, <IconButton /> and <ButtonGroup /> components.",
+ ],
+ },
+ {
+ title: "docs changes",
+ data: [
+ "Update the button, icon button and button group documentation pages.",
+ ],
+ },
+ ],
+ },
  {
  version: "2.1.6",
  date: "December 13, 2023",

documentation/react/button-group.mdx

@@ -311,6 +311,7 @@ type size = "sm" | "md" | "lg";
 ```ts
 type color =
  | "white"
+ | "black"
  | "blue-gray"
  | "gray"
  | "brown"

documentation/react/button.mdx

@@ -456,6 +456,7 @@ type size = "sm" | "md" | "lg";
 ```ts
 type color =
  | "white"
+ | "black"
  | "blue-gray"
  | "gray"
  | "brown"

documentation/react/icon-button.mdx

@@ -360,6 +360,7 @@ type size = "sm" | "md" | "lg";
 ```ts
 type color =
  | "white"
+ | "black"
  | "blue-gray"
  | "gray"
  | "brown"

documentation/react/release-notes.mdx

@@ -2,6 +2,7 @@
 title: Release Notes - Material Tailwind
 description: Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
 navigation: [
+ "v2.1.7",
  "v2.1.6",
  "v2.1.5",
  "v2.1.4",

packages/material-tailwind-react/README.md

@@ -8,7 +8,7 @@
  <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
  </a>
  <a href="https://github.com/creativetimofficial/material-tailwind/releases">
- <img src="https://img.shields.io/badge/version-2.1.6-blue.svg" alt="Version" />
+ <img src="https://img.shields.io/badge/version-2.1.7-blue.svg" alt="Version" />
  </a>
  <a href="https://www.material-tailwind.com/docs/react/license">
  <img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">

packages/material-tailwind-react/package.json

@@ -1,7 +1,7 @@
 {
  "name": "@material-tailwind/react",
  "homepage": "https://material-tailwind.com",
- "version": "2.1.6",
+ "version": "2.1.7",
  "description": "@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.",
  "repository": "https://github.com/creativetimofficial/material-tailwind",
  "license": "MIT",

packages/material-tailwind-react/src/theme/components/button/buttonFilled.ts

@@ -7,6 +7,14 @@ const buttonFilled: object = {
  focus: "focus:opacity-[0.85] focus:shadow-none",
  active: "active:opacity-[0.85] active:shadow-none",
  },
+ black: {
+ background: "bg-gray-900",
+ color: "text-white",
+ shadow: "shadow-md shadow-gray-900/10",
+ hover: "hover:shadow-lg hover:shadow-gray-900/20",
+ focus: "focus:opacity-[0.85] focus:shadow-none",
+ active: "active:opacity-[0.85] active:shadow-none",
+ },
  "blue-gray": {
  background: "bg-blue-gray-500",
  color: "text-white",

packages/material-tailwind-react/src/theme/components/button/buttonGradient.ts

@@ -7,6 +7,13 @@ const buttonGradient: object = {
  focus: "focus:opacity-[0.85] focus:shadow-none",
  active: "active:opacity-[0.85] active:shadow-none",
  },
+ black: {
+ background: "bg-gradient-to-tr from-gray-900 to-gray-800",
+ color: "text-white",
+ shadow: "shadow-md shadow-gray-900/10",
+ hover: "hover:shadow-lg hover:shadow-gray-900/20",
+ active: "active:opacity-[0.85]",
+ },
  "blue-gray": {
  background: "bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400",
  color: "text-white",

packages/material-tailwind-react/src/theme/components/button/buttonOutlined.ts

@@ -6,6 +6,13 @@ const buttonOutlined: object = {
  focus: "focus:ring focus:ring-white/50",
  active: "active:opacity-[0.85]",
  },
+ black: {
+ border: "border border-gray-900",
+ color: "text-gray-900",
+ hover: "hover:opacity-75",
+ focus: "focus:ring focus:ring-gray-300",
+ active: "active:opacity-[0.85]",
+ },
  "blue-gray": {
  border: "border border-blue-gray-500",
  color: "text-blue-gray-500",

packages/material-tailwind-react/src/theme/components/button/buttonText.ts

@@ -4,6 +4,11 @@ const buttonText: object = {
  hover: "hover:bg-white/10",
  active: "active:bg-white/30",
  },
+ black: {
+ color: "text-gray-900",
+ hover: "hover:bg-gray-900/10",
+ active: "active:bg-gray-900/20",
+ },
  "blue-gray": {
  color: "text-blue-gray-500",
  hover: "hover:bg-blue-gray-500/10",

packages/material-tailwind-react/src/theme/components/buttonGroup/buttonGroupDividerColor.ts

@@ -2,6 +2,9 @@ const buttonGroupDividerColor: object = {
  white: {
  divideColor: "divide-blue-gray-50",
  },
+ black: {
+ divideColor: "divide-gray-800",
+ },
  "blue-gray": {
  divideColor: "divide-blue-gray-600",
  },

packages/material-tailwind-react/src/types/components/button.ts

@@ -12,7 +12,7 @@ import { propTypesColors } from "../generic";
 // typescript types
 export type variant = "filled" | "outlined" | "gradient" | "text";
 export type size = "sm" | "md" | "lg";
-export type color = "white" | colors;
+export type color = "white" | "black" | colors;
 export type fullWidth = boolean;
 export type ripple = boolean;
 export type className = string;
@@ -22,7 +22,7 @@ export type loading = boolean;
 // javascript prop-types
 export const propTypesVariant: any = ["filled", "outlined", "gradient", "text"];
 export const propTypesSize: any = ["sm", "md", "lg"];
-export const propTypesColor: any = ["white", ...propTypesColors];
+export const propTypesColor: any = ["white", "black", ...propTypesColors];
 export const propTypesFullWidth: any = PropTypes.bool;
 export const propTypesRipple: any = PropTypes.bool;
 export const propTypesClassName: any = PropTypes.string;