material-component-library-v2
Material component library is a library of custom react components implemented according to material design 3 specification using react, typescript and tailwindcss.
Table of Contents
Button
Common button component for UI actions.
Parameters
-
props
Object The properties for the button.-
props.height
string Tailwind height command to configure the height of the button. (optional, default"h-10"
) -
props.borderRadius
string The border radius of the button. Default is ButtonBorderEnum.full. (optional, defaultButtonBorderEnum.full
) -
props.variant
string? The variant of the button. This could be filled, outlined etc. -
props.className
string? Additional classes for the button. -
props.name
string? The name or label of the button. -
props.icon
string? The icon to be displayed on the button. -
props.width
string The width of the button. (optional, default"w-full"
) -
props.onClick
function? The function to be executed on button click. -
props.disabled
boolean Indicates whether the button is disabled. (optional, defaultfalse
)
-
Returns JSX.Element The button component.
Fab
Floating action buttons (FABs) help people take primary actions
Note: Label is only shown in extended FAB
Type: React.FC<FabProps>
Parameters
-
props
Object The properties for the button.-
props.icon
string The icon to display on the button. -
props.fabType
string The type of FAB to render (optional, defaultFabTypeEnum.FAB
) -
props.buttonColour
string Colour of the button (optional, default""
) -
props.buttonTextColour
string Colour of text on the button (optional, default""
) -
props.buttonState
Object Object to manage the state of the FAB -
props.onClick
Function? Function to call when the FAB is clicked (optional, default()=>{}
) -
props.label
(optional, default"Extended FAB"
) -
props.buttonProps
...any
-
Returns JSX.Element The FAB component.
SegmentedButton
Segmented buttons help people select options, switch views, or sort elements
To learn more about material design segmented button visit https://m3.material.io/components/segmented-buttons/specs
Parameters
-
props
Object The properties for the Segmented button.-
props.className
string? Additional classes for the button. (optional, default""
) -
props.numberOfSegments
string The number of segments the button should contain. The number of buttons shown depends on the numberOfSegments passed in.* when numberOfSegments is two, only first and fifth buttons are shown.- when numberOfSegments is three, only first, second and fifth buttons are shown.
- when numberOfSegments is four, only first, second, third and fifth buttons are shown.
- when numberOfSegments is five, all buttons are shown.You need to keep this in mind when passing callbacks for each buttons (optional, default
SegmentedButtonNumberOfSegmentsEnum.two
)
-
props.edgeStyle
string This tells how the corner of the button is going to be styled. This could be round or fully round.* when you pass in round, the edge will be slightly rounded. This uses the "lg" class in tailwindcss- when you pass in fully round, the edge will be fully rounded. This uses the "full" class in tailwindcss (optional, default
SegmentedButtonStyleEnum.round
)
- when you pass in fully round, the edge will be fully rounded. This uses the "full" class in tailwindcss (optional, default
-
props.activeButtonColour
string The colour the active button/segment should have; defaults to the material secondary container colour token. (optional, default"bg-light-secondaryContainer"
) -
props.buttonsConfiguration
Object? Configuration for each segment in the button. -
props.buttonState
-
props.buttonStateUpdater
-
Returns JSX.Element The segmented button component.
List
Lists are continuous, vertical indexes of text and images
Parameters
-
props
Object The properties for the Segmented button.-
props.className
string? Additional classes for the list -
props.items
Array<ItemDto> is the array of items to display in the list-
props.items.id
(string | number) The id for each list item. This is necessary incases where you need to reference each item in the list uniquely -
props.items.headline
string This is the main content in the list item -
props.items.null
string [overline] - An overline drawing attention to the list item -
props.items.null
string [supportingText] - Text explaining the list item -
props.items.meta
GenericType Additional information about the list item
-
-
props.leading
string Icon to display at the beginging of each list item. Its optional and it defaults to empty string -
props.trailing
string Icon to display at the end of each list item. Its optional and it defaults to empty string -
props.divider
boolean This indicates if the list is going to be seperated by dividers -
props.dividerStyle
Object Additional information about the list item-
props.dividerStyle.type
string this describe the type of divider; values can be full-width, inset, middle-inset.* when dividerStyle type is fullWidth, the divider takes the whole width of the list item -
props.dividerStyle.marginAfterDivider
boolean this determines if there is going to be a margin after the divider or not
-
-
props.condition
string? This describe the type of list item. it can be one-line, two-lines, three-lines (optional, defaultListItemConditionEnum.oneLine
) -
props.onListItemClick
function? This is an optional function to call on each list item when clicked. The list item component is going to pass the id of the item on this component to your click event handler. This can be used to handle things like deleting list item. (optional, default()=>{}
)
-
Returns JSX.Element The List component.
Modal
Modal
Parameters
-
props
Object The properties for the Modal.-
props.onHideOverlay
function this is a callback function that contains logic to hide the overlay on click -
props.children
(ReactNode | Array<ReactNode>) this are the elements to display in the modal -
props.overlayRoot
string location in the dom where the modal should be displayed... its a string -
props.backdropColour
string? optional tailwindcss class to be used to style the backdrop colour. It should be passed with its opacity value e.g bg-dark-scrim/75. it defaults to black at 75% opacity (optional, default"bg-dark-scrim/75"
) -
props.maxHeight
string? maximum height of the modal (optional, default"max-h-[70%] sm:max-h-[60%]"
) -
props.topPosition
string? the position of the modal on the top side of the screen (optional, default"top-[32vh] sm:top-[30vh]"
) -
props.leftPosition
string? the position of the modal on the left side of the screen (optional, default"left-0 sm:left-[30%]"
) -
props.width
(optional, default"w-full sm:w-2/5"
)
-
TextField
This is a textfield component styled according to google's material design specification
Parameters
-
props
Object The properties for the TextField.-
props.leading
string? This is an optional icon to be displayed at the start of the textfield -
props.trailing
string? This is an optional icon to be displayed at the end of the textfield -
props.supportingText
string? This is an optional text that further explain the textfield -
props.label
string This specify the label of the textfield -
props.contentType
string The type of content the textfield is holding. This could be button, checkbox, date, color etc. -
props.className
string? A field to pass in additional tailwind class to still the textfield -
props.onBlur
function? Callback function to call when the textfield lose focus -
props.onChange
function? Callback function to call when the textfield content changes -
props.state
Object An object consisting a react state and the dispatch function to set the state. -
props.width
string The width of the textfield. This accept only tailwind classes (optional, default"w-full"
) -
props.style
-
props.inputRef
-
Returns JSX.Element The Textfield component.