Reference

Resolves TypeScript and JSDoc types from all module exports in a source file.

Type Alias ButtonVariant

All appearance variants supported by Button.

Type

"primary" | "secondary" | "danger"

Interface ButtonProps

Properties

PropertyType
variant?ButtonVariant

Function getButtonVariantClassNames

Maps a ButtonVariant to a Tailwind utility‑class string.

function getButtonVariantClassNames(variant: ButtonVariant = 'primary'): string

Parameters

ParameterTypeDefault Value
variantButtonVariantprimary

Returns

string

Component Button

A minimal, accessible button that follows design‑system color tokens.

import { Button } from './Button'

export default function Example() {
  return (
    <Button variant="secondary" onClick={() => alert('Clicked!')}>
      Save changes
    </Button>
  )
}

Properties

ButtonProps
import { Reference, type ReferenceComponents, Markdown } from 'renoun'

export default function () {
  return (
    <div
      css={{
        display: 'flex',
        flexDirection: 'column',
        gap: '3rem',
      }}
    >
      <Reference
        source="./fixtures/Button.tsx"
        baseDirectory={import.meta.url}
        components={components}
      />
    </div>
  )
}

const gapSizes = {
  small: '0.5rem',
  medium: '1rem',
  large: '2rem',
}

const components = {
  Column: ({ gap, ...props }) => (
    <div
      {...props}
      css={{
        display: 'flex',
        flexDirection: 'column',
        gap: gap ? gapSizes[gap] : undefined,
      }}
    />
  ),
  Row: ({ gap, ...props }) => (
    <div
      {...props}
      css={{
        display: 'flex',
        flexDirection: 'row',
        gap: gap ? gapSizes[gap] : undefined,
      }}
    />
  ),
  SectionHeading: ({ label, title, ...props }) => (
    <h3
      {...props}
      css={{
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        fontSize: 'var(--font-size-heading-2)',
        lineHeight: 'var(--line-height-heading-2)',
        fontWeight: 'var(--font-weight-heading)',
        marginBottom: '1.6rem',

        '& span': {
          textTransform: 'uppercase',
          letterSpacing: '0.1rem',
          fontSize: 'var(--font-size-title)',
          lineHeight: 1,
          color: 'var(--color-foreground-secondary)',
        },
      }}
    >
      <span>{label}</span> {title}
    </h3>
  ),
  Detail: (props) => (
    <div
      {...props}
      css={{
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        marginBottom: '1rem',
      }}
    />
  ),
  DetailHeading: (props) => (
    <h4
      {...props}
      css={{
        fontSize: 'var(--font-size-heading-3)',
        lineHeight: 'var(--line-height-heading-3)',
        fontWeight: 'var(--font-weight-heading)',
        marginBottom: '1.6rem',
      }}
    />
  ),
  Code: (props) => (
    <code
      {...props}
      css={{
        fontFamily: 'var(--font-family-mono)',
        color: 'var(--color-foreground-interactive)',
      }}
    />
  ),
  Description: (props) => (
    <Markdown
      {...props}
      components={{
        p: (props) => (
          <p
            {...props}
            css={{
              fontSize: 'var(--font-size-body-2)',
              lineHeight: 'var(--line-height-body-2)',
            }}
          />
        ),
        code: (props) => (
          <code
            {...props}
            css={{
              fontFamily: 'var(--font-family-mono)',
              color: 'var(--color-foreground-interactive)',
            }}
          />
        ),
      }}
    />
  ),
  Table: (props) => (
    <table
      {...props}
      css={{
        width: '100%',
        tableLayout: 'fixed',
        fontSize: 'var(--font-size-body-2)',
        lineHeight: 'var(--line-height-body-2)',
        borderBottom: '1px solid var(--color-separator)',
        borderCollapse: 'collapse',
      }}
    />
  ),
  TableRow: ({ hasSubRow, ...props }) => (
    <tr
      {...props}
      css={{
        borderBottom: '1px solid var(--color-separator)',
      }}
    />
  ),
  TableHeader: (props) => (
    <th
      {...props}
      css={{
        textAlign: 'left',
        fontWeight: 'var(--font-weight-heading)',
        padding: '0.5rem 0',
        color: 'var(--color-foreground)',
      }}
    />
  ),
  TableData: ({ index, hasSubRow, ...props }) => (
    <td
      {...props}
      css={{
        width: '100%',
        padding: '0.5rem 0',
        whiteSpace: 'nowrap',
        overflow: 'auto',

        ':nth-child(1)': {
          maxWidth: '30.77%',
        },
        ':nth-child(2)': {
          maxWidth: '38.46%',
        },
        ':nth-child(3)': {
          maxWidth: '30.77%',
        },
      }}
    />
  ),
} satisfies Partial<ReferenceComponents>

The Reference component resolves all module exports and outputs structured, accessible sections for components, functions, classes, interfaces, type aliases, mapped/intersection/union types, variables, and more. It’s fully headless meaning every piece of UI can be overridden via the components prop.

Filtering

If your types reference external libraries (like React), use filter to pull selected properties inline:

<Reference
  source="components/Button.tsx"
  filter={{
    moduleSpecifier: 'react',
    types: [{ name: 'ButtonHTMLAttributes' }],
  }}
/>

Styling and Layout

Override any element via components—from headings to table cells:

<Reference
  source="hooks/useHover.ts"
  components={{
    SectionHeading: (props) => <h3 style={{ fontWeight: 700 }} {...props} />,
    Code: (props) => <code className="code" {...props} />,
  }}
/>

API Reference

Last updated