UI Components
Testing UI library components in MDX
Button Component
Here's a Button component imported from the @edstack/ui-library:
Button Variants
You can use different variants:
Button Sizes
Different sizes available:
Button as Link
You can use the render prop to render the button as a link:
Code Example
import { Button } from '@edstack/ui-library';
export default function MyComponent() {
return (
<Button variant="default" size="lg">
Click Me!
</Button>
);
}Usage in MDX
To use components in MDX files, they need to be exported from mdx-components.tsx:
import { Button } from '@edstack/ui-library';
export function getMDXComponents(components?: MDXComponents): MDXComponents {
return {
...defaultMdxComponents,
Button, // Now available in all MDX files!
...components,
};
}