MarkDocs

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:

You can use the render prop to render the button as a link:

Go to Docs Home

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:

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,
  };
}