React ModalContent API | Mod.js

api

Import

App.jsx
Execute Code
View Source on Github
Copy to clipbaord
import { ModalContent } from '@modjs/core'

ModalContent Props

The following props are specific to the ModalContent component and can be applied to this component.

Name	Type	Default	Description
children	node	-	The content of the component.
notched	boolean	false	If true, the component will have notched effect.
title	node	-	Title for the component.
toggleClose	node	<CloseIcon />	Close icon for the component.

System Props

The component mentioned in this page is wrapped with a withModSystemProps HOC and therefore, the following props can be applied to this component. Note that some of these props may have no effect on this component.

Name	Type	Default	Description
alignItems	string	-	Controls the alignment of items.
bgColor	"primary" "secondary" "main" "success" "error" "light" "dark" "transparent"	-	Applies background color to the component based on the colors defined in the theme.
bottom	number	-	Applies bottom spacing to the component.
border	"primary" "success" "error" "light" "dark" "none"	-	Applies border to the component based on the borders defined in the theme.
borderTop	"primary" "success" "error" "light" "dark" "none"	-	Applies top border to the component based on the borders defined in the theme.
borderRight	"primary" "success" "error" "light" "dark" "none"	-	Applies right border to the component based on the borders defined in the theme.
borderBottom	"primary" "success" "error" "light" "dark" "none"	-	Applies bottom border to the component based on the borders defined in the theme.
borderLeft	"primary" "success" "error" "light" "dark" "none"	-	Applies left border to the component based on the borders defined in the theme.
borderX	"primary" "success" "error" "light" "dark" "none"	-	Applies left and right border to the component based on the borders defined in the theme.
borderY	"primary" "success" "error" "light" "dark" "none"	-	Applies top and bottom border to the component based on the borders defined in the theme.
borderRadius	number	-	Applies border radius to the component.
color	"primary" "secondary" "main" "success" "error" "light" "dark" "white"	-	Applies color to the text inside this component based on the colors defined in the theme.
display	string	-	Controls how the component should be displayed.
elevation	"light" "normal" "heavy" "none"	-	Applies shadow to the component based on the elevation defined in the theme.
flexWrap	string	-	Controls whether the flex items are forced onto one line or can wrap onto multiple lines.
float	string	-	Controls whether the items are placed to the right or left of its container.
fs	number	-	Applies font-size in rem unit to the text inside of this component.
fw	number	-	Applies font-weight to the text inside of this component.
gap	number	-	Applies gaps/gutters between rows and columns.
height	string	-	Applies height to the component.
justifyContent	string	-	Applies justify-content CSS property to the component.
left	number	-	Applies left spacing to the component.
m	number	-	Applies margin in px to the component.
mt	number	-	Applies top margin in px to the component.
mr	number	-	Applies right margin in px to the component.
mb	number	-	Applies bottom margin in px to the component.
ml	number	-	Applies left margin in px to the component.
mx	number	-	Applies right and left margin in px to the component.
my	number	-	Applies top and bottom margin in px to the component.
p	number	-	Applies padding in px to the component.
pt	number	-	Applies top padding in px to the component.
pr	number	-	Applies right padding in px to the component.
pb	number	-	Applies bottom padding in px to the component.
pl	number	-	Applies left padding in px to the component.
px	number	-	Applies right and left padding in px to the component.
py	number	-	Applies top and bottom padding in px to the component.
position	string	-	Controls the position of the component.
right	number	-	Applies right spacing to the component.
textTransform	string	-	Applies text-transform CSS property to the text inside this component.
textAlign	string	-	Applies text-align CSS property to the text inside this component.
top	number	-	Applies top spacing to the component.
width	string	-	Applies width to the component.

Modal API NameField API

What are you looking for?

Common Searches:

Settings

Import

System Props