© 2026 Magenta Design System • v2.0.0-alpha.4
Stay up to date with all of the latest additions and improvements we’ve made to Magenta.
leftIcon and rightIcon to allow passing any icon from @ocean-network-express/magenta-react-icons (or any other ReactNode). The leftIcon and rightIcon props are rendered only when the boolean text prop is set to true.size="responsive" prop value to support automatic resizing based on screen sizeSaved Filter buttonColumn Sort/Filter buttontype=button attribute to the delete button of each tag to prevent form submission when the delete button is clickedBreadcrumbItemValueProps type is missing export in main entry pointdropdownConfig.placement instead. placement prop will be removed in the next major version.auto value for slidesToScroll proplabelAlignment propdropdownConfig prop to support strategy for dropdown menuonKeyDown proptype = NumberdestroyOnHidden: Whether to destroy inactive TabPanel when changing tabs.--mag-radii-full to 9999px.removeDuplicateTags to controls whether duplicate tags are removed when deleting a tag.dropdownConfig to customize the dropdown menu.labelAlignment='left'.font-weight styling for the state 'active' in ListItem.server.fs settings were not applied to HTML filesdir parameterdropdownConfig prop to support paddingContent for dropdown menuresponsive props for icon inside itreadOnly and disabled modedisabled state stylereadOnly modeonFocusIn and onFocusOut props to handle focused in and blurred out of component events.rangeIcon prop to display icon in the middle of 2 date input field.rangeIcon is ~.title, message, and helperText props now support type React.ReactNode.size to change size of components.loading state example.Input component.ListItem and MenuItem components.name prop as name attribute of input element in Autocomplete component.onFocusOut to handle event when user focus to any element of out scope of Select component.transformInvalidValue to prevents transforming the invalid input value format to a date.onCalendarClick to handle click on Calendar icon event.returnFocus allow return focus to trigger element when close Drawer.overlay prop to turn off the overlay element to allow interaction with elements that are outside of the drawer.Menu component.Autocomplete component.Select component could not be displayed.selected (highlighted) text when out focusrenderHelperType prop to render helper text with different typesTreeViewItem with semibold font weightresponsive value with size propSeparator of Table Column header is disappearedPagination in Table does not work correctlyUSD to be KGS in the README.mdloading stateplacement prop for config the dropdown placementdropdownConfig prop for config the padding of dropdownvalidateTag and control input value by 2 props inputValue, onInputValueChange.max & min with height & width for the dropdown listonOpenChange only called one time when clicking openfill variantHow to have Typography auto responsive by **break-points** ?size=‘responsive’initialFocus prop.min-width stylemultiple prop on/offopen and onOpenChange propArrow Up/Down button now have better UXArrow icon now can trigger open and close actionopen prop not workingmd size component stylesize=‘responsive’sm | md typerenderDropdownWhenEmpty prop to custom render dropdown when input is emptyCollapsibleMenuItem component to support collapsible menu itemTabListItem component have deletable prop to toggle the delete buttonTable, Accordion, and Collapsesize prop with sm | md | lg type, Enhance tooltip background-colorrenderSelectedItems prop now supports render function to render selected
itemslimitTagsIdle prop now supports boolean type to disabled show/hide tags when idle (active/inactive)Tr component now supports withRightBorder prop for add right border to the last table header cellhaft prop name to half prop namered.6002xs sizes propTag colorsMenuItem component alignment top top-aligndisabled propSelect All example with CheckboxTabListItem component have deletable prop to toggle the delete button<form /> elementclear button functionhelperTextlimitedTagoverflow TabListmin-width stylespacing and outline style of inputs componentlimitedTagTable: Expand/Collapse
Table: Click on the header cell to trigger Sorting
Indicator: Enhance document with other components
Autocomplete: Enhance document with group list
All option with Checkboxxs, sm, md, lgletter-spacing style of typographysm, md, lg, xl, 2xl, 3xlreturnFocus propsfullWidth propTagContent component, add multiline propListItem interactionopen stateAvatarvalue now has type string[] instead of string© 2026 Magenta Design System • v2.0.0-alpha.4