Core
Core includes a range of styles, variables and code that form the foundations of how the Design System works, including colour, typography and spacing.
import { ... } from '@ag.ds-next/react/core';Usage
Core components can be imported via the core entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/core';Props
| Prop | Type | Description |
|---|---|---|
| applyReset? | booleanDefault: true | If true, a CSS reset will be applied. |
| children? | ReactNode | |
| linkComponent? | ForwardRefExoticComponent<{ 'aria-label'?: string; className?: string; download?: any; href?: string | undefined; id?: string | undefined; onClick?: MouseEventHandler<HTMLAnchorElement> | undefined; ... 7 more ...; target?: HTMLAttributeAnchorTarget | undefined; } & { ...; } & { ...; } & RefA... | The global link component which can be configured for different routing libraries. Defaults to standard `a` tag. |
| theme? | Partial<Record<"lightForegroundText" | "lightForegroundAction" | "lightForegroundFocus" | "lightForegroundMuted" | "lightBackgroundBody" | "lightBackgroundShade" | "lightBackgroundBodyAlt" | ... 38 more ... | "darkSystemWarningMuted", string>> | Enables overwriting of the default theme. |
| Prop | Type | Description |
|---|---|---|
| children? | ReactNode | |
| linkComponent? | ForwardRefExoticComponent<{ 'aria-label'?: string; className?: string; download?: any; href?: string | undefined; id?: string | undefined; onClick?: MouseEventHandler<HTMLAnchorElement> | undefined; ... 7 more ...; target?: HTMLAttributeAnchorTarget | undefined; } & { ...; } & { ...; } & RefA... | The global link component which can be configured for different routing libraries. Defaults to standard `a` tag. |
Source
You can view the full source code for this package on Github.