{"data":{"allMdx":{"nodes":[{"fileAbsolutePath":"/home/runner/work/brand/brand/apps/docs/content/index.mdx","frontmatter":{"title":""},"rawBody":"import {HeroLayout} from '@primer/gatsby-theme-doctocat'\nimport InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'\n\nimport {Box as PRCBox} from '@primer/react'\nimport {Link, Button, Heading, InlineLink, Text} from '@primer/react-brand'\nimport {version} from '../../../packages/react/package.json'\nimport {LinkExternalIcon} from '@primer/octicons-react'\n\n\n Primer Brand\n Read the installation instructions to get started.\n \n

\n \n

\n

\n \n Storybook\n \n

\n

\n \n Contribute\n \n

\n \n \n \n Latest release:{' '}\n \n \n v{version}\n \n .\n \n \n \n Read the change log \n \n \n \n \n\n\nexport default HeroLayout\n","parent":{"relativeDirectory":"","name":"index"}},{"fileAbsolutePath":"/home/runner/work/brand/brand/apps/docs/content/components/ActionMenu.mdx","frontmatter":{"title":"Action menu"},"rawBody":"---\ntitle: Action menu\nstatus: Experimental\nfigma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=4912%3A32799'\nsource: https://github.com/primer/brand/tree/main/packages/react/src/ActionMenu/ActionMenu.tsx\nstorybook: '/brand/storybook/?path=/story/components-actionmenu-features--default'\ndescription: Use the action menu component to display a list of actions or selections that expand through a trigger button.\n---\n\nimport {Label} from '@primer/react'\nimport {PropTableValues} from '../../src/components'\nimport {actionMenuOverlaySides} from '@primer/react-brand'\n\n```js\nimport {ActionMenu} from '@primer/react-brand'\n```\n\n## Examples\n\n### Default\n\n```jsx live\n alert(`Pressed ${newValue}`)}>\n Open menu\n \n \n Copilot\n \n Codespaces\n CodeQL\n \n\n```\n\n### Single selection\n\nIn single selection mode it is important to apply an `aria-label` to the\n`ActionMenu.Button` child. This provides the user with important and durable\ncontext on the selection they need to make.\n\n```javascript live noinline\nconst App = () => {\n const [selection, setSelection] = React.useState('Copilot')\n\n return (\n setSelection(newValue)}\n selectionVariant=\"single\"\n >\n \n {selection}\n \n \n \n Copilot\n \n \n Codespaces\n \n \n CodeQL\n \n \n \n )\n}\n\nrender()\n```\n\n### Sizes\n\n`ActionMenu` is currently available in `small` and `medium` sizes, with the latter being the default.\n\n```jsx live\n\n \n Small\n \n Item 1\n Item 2\n \n \n \n Medium\n \n Item 1\n Item 2\n \n \n\n```\n\n## Component props\n\n### ActionMenu \n\n| name | type | default | required | description |\n| ------------------ | ----------------------------------------------------------------- | ----------- | -------- | --------------------------------------------------------------------- |\n| `disabled` | `boolean` | `false` | `false` | Controls the ActionMenu active/inactive state |\n| `open` | `boolean` | `false` | `false` | Determines whether the ActionMenu is open by default |\n| `onSelect` | `(newValue: string) => void` | | `false` | Callback that is called when an item is selected |\n| `selectionVariant` | | `'none'` | `false` | The selection variant of the ActionMenu |\n| `menuAlignment` | | `start` | `false` | Horizontal alignment of the menu relative to the bottom of the button |\n| `size` | | `medium` | `false` | Size configuration of the ActionMenu |\n| `menuSide` | | `undefined` | `false` | Location of the menu overlay |\n\n### ActionMenu.Button \n\n| name | type | default | required | description |\n| ----------- | -------------- | ------- | -------- | ---------------------------------- |\n| `className` | `string` | | | Sets a custom class on the element |\n| `children` | `ReactElement` | | |\n| `id` | `string` | | | Sets a custom `id` |\n\n### ActionMenu.Overlay \n\n| name | type | default | required | description |\n| ------------ | -------------- | ------- | -------- | ---------------------------------------------------------------- |\n| `aria-label` | `string` | | `true` | Required for describing the relationship between button and menu |\n| `className` | `string` | | | Sets a custom class on the element |\n| `children` | `ReactElement` | | |\n| `id` | `string` | | | Sets a custom `id` |\n\n### ActionMenu.Item \n\n| name | type | default | required | description |\n| ----------- | -------------- | ------- | -------- | ------------------------------------------------------------- |\n| `className` | `string` | | | Sets a custom class on the element |\n| `children` | `ReactElement` | | |\n| `disabled` | `boolean` | `false` | `false` | Allows control over an individual items active/inactive state |\n| `id` | `string` | | | Sets a custom `id` |\n| `selected` | `boolean` | | | Indicates the item is selected in `single` selection mode |\n| `value` | `string` | | | The underlying value passed to the selection handler |\n","parent":{"relativeDirectory":"components","name":"ActionMenu"}},{"fileAbsolutePath":"/home/runner/work/brand/brand/apps/docs/content/components/Bento.mdx","frontmatter":{"title":"Bento"},"rawBody":"---\ntitle: Bento\nstatus: Alpha\na11yReviewed: true\nsource: https://github.com/primer/brand/blob/main/packages/react/src/Bento/Bento.tsx\nstorybook: '/brand/storybook/?path=/story/components-bento--default'\ndescription: Use the bento to present content in a responsive grid layout.\n---\n\n```js\nimport {Bento} from '@primer/react-brand'\n```\n\n### Default\n\n```jsx live\n\n \n \n \n \n \n\n```\n\n### Example layout\n\n## Examples\n\n```jsx live\n\n \n \n \n \n \n \n\n```\n\n### Dark mode items\n\n```jsx live\n\n \n \n \n \n\n```\n\n### Responsive behavior\n\nUse `columnSpan`, `rowSpan`, `columnStart`, `rowStart`, `flow`, `verticalAlign`, `horizontalAlign` with an `Object` of breakpoint-specific keys and values corresponding to each type to enable responsive behavior for each of these properties.\n\nBreakpoints use `min-width`, where it will also apply your chosen `span` value to all larger breakpoints.\n\n\n Bento items can render in a different source order to what is presented\n visually. It's important to ensure that the content of each item is\n self-contained and can be read independently of its adjacent items.\n\n\n```jsx live\n\n \n \n \n \n \n \n \n \n\n```\n\n#### Responsive flow\n\n```jsx live\n\n \n \n \n Heading\n Call to action\n \n \n \n \n \n \n\n```\n\n## Component props\n\n### Bento\n\n| Name | Type | Default | Required | Description |\n| :---------- | :------- | :-----: | :------- | --------------------------------------- |\n| `className` | `string` | | `false` | Sets a custom class on the root element |\n\nThe Bento component API supports all standard HTML attribute props for the interface `HTMLDivElement`.\n\n### Bento.Item\n\n| Name | Type | Default | Required | Description |\n| :------------------- | :------------------------------------------------------------------------------------- | :-------: | :------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| `className` | `string` | | `false` | Sets a custom class on the root element |\n| `children` | `React.ReactNode`, `React.ReactNode[]` | | `false` | The children to be rendered within the `Bento.Item` |\n| `columnStart` | `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `ResponsiveColumnIndex` | | `false` | The column number in which this content should start |\n| `columnSpan` | `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `ResponsiveColumnIndex` | | `false` | The number of columns this content should span |\n| `rowStart` | `number`, `ResponsiveRowIndex` | | `false` | The row number in which this content should start |\n| `rowSpan` | `number`, `ResponsiveRowIndex` | | `false` | The number of rows this content should span |\n| `flow` | `\"row\"`, `\"column\"`, `ResponsiveFlow` | | `false` | The flow of the `Bento.Content` and `Bento.Visual` within the `Bento.Item` |\n| `colorMode` | `\"light\"`, `\"dark\"` | `\"light\"` | `false` | The color mode specified for this `Bento.Item` |\n| `visualAsBackground` | `boolean` | `false` | `false` | Determines if the `Bento.Visual` child element is set as the background for the `Bento.Item` with the `Bento.Content` overlayed |\n| `order` | `\"default\"`, `\"reversed\"`, `ResponsiveOrder` | `default` | `false` | Determines the visual order for the `Bento.Item`. This changes the semantic ordering of elements for accessibility. |\n\nThe Bento.Item component API supports all standard HTML attribute props for the interface `HTMLDivElement`, while providing some additional behavior as described above.\n\n### Bento.Content\n\n| Name | Type | Default | Required | Description |\n| :---------------- | :------------------------------------------------------------------------------------------------------------------------- | :--------: | :------- | --------------------------------------------------------------- |\n| `className` | `string` | | `false` | Sets a custom class on the root element |\n| `children` | [`Text`](https://primer.style/brand/components/Text),`Bento.Heading`, [`Link`](https://primer.style/brand/components/Link) | | `false` | The children to be rendered within the `Bento.Content` |\n| `leadingVisual` | `ReactElement`, `Icon` | | `false` | Sets the icon before the heading text |\n| `padding` | `\"condensed\"`, `\"normal\"`, `\"spacious\"`, `ResponsivePadding` | `\"normal\"` | `false` | Sets a custom class on the root element |\n| `horizontalAlign` | `\"start\"`, `\"center\"`, `\"end\"`, `ResponsiveAlign` | `\"start\"` | `false` | The horizontal alignment of children within the `Bento.Content` |\n| `verticalAlign` | `\"start\"`, `\"center\"`, `\"end\"`, `ResponsiveAlign` | `\"start\"` | `false` | The vertical alignment of children within the `Bento.Content`. |\n\nThe Bento.Content component API supports all standard HTML attribute props for the interface `HTMLDivElement`, while providing some additional behavior as described above.\n\n### Bento.Heading\n\nRequired node that is used to provide a heading for the `Bento.Content`.\n\n| name | type | default | required | description |\n| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------------------- |\n| `className` | `string` | | `false` | Custom class name for the heading component |\n| `children` | `ReactNode`, `ReactNode[]` | `undefined` | `true` | Content to be displayed inside the heading component. |\n\nForwards all props from the [Heading component](/components/Heading), including `as`, `size`, and `weight`.\n\n### Bento.Visual\n\n| Name | Type | Default | Required | Description |\n| :---------- | :----------------------------------------------------------- | :---------: | :------- | -------------------------------------------------------------------------------------------------------- |\n| `className` | `string` | | `false` | Sets a custom class on the root element |\n| `fillMedia` | `boolean` | `true` | `false` | Determines how the visual reacts within its container. Either filling the container or contained within. |\n| `position` | `string` | `\"50% 50%\"` | `false` | The positioning of the visual. |\n| `padding` | `\"condensed\"`, `\"normal\"`, `\"spacious\"`, `ResponsivePadding` | | `false` | Sets a custom class on the root element |\n\nThe Bento.Visual component API supports all standard HTML attribute props for the interface `HTMLDivElement`, while providing some additional behavior as described above.\n","parent":{"relativeDirectory":"components","name":"Bento"}},{"fileAbsolutePath":"/home/runner/work/brand/brand/apps/docs/content/components/AnchorNav.mdx","frontmatter":{"title":"Anchor nav"},"rawBody":"---\ntitle: Anchor nav\nstatus: Experimental\nfigma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=3359%3A30494&t=7vT79cAF1kbiMd2j-4\nsource: https://github.com/primer/brand/blob/main/packages/react/src/AnchorNav/AnchorNav.tsx\nstorybook: '/brand/storybook/?path=/story/components-anchornav--playground'\ndescription: Use the anchor nav component for prompt navigation to different sections of a page.\n---\n\nimport InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'\nimport {PropTableValues} from '../../src/components'\nimport {Label} from '@primer/react'\nimport {Link} from 'gatsby'\n\n```js\nimport {AnchorNav} from '@primer/react-brand'\n```\n\n## Examples\n\n\n\n`AnchorNav` is designed to fix to the top of the viewport, and requires markup outside of the scope of the component to behave correctly.\n\nPlease refer to our [Storybook examples](https://primer.style/brand/storybook/?path=/story/components-anchornav--playground) to see the component in a full-screen context as originally intended.\n\n\n\n### Basic\n\n```jsx live\n\n \n Section one\n Section two\n Section three\n Section four\n Section five\n Sign up\n \n\n \n Section 1\n \n \n Section 2\n \n \n Section 3\n \n \n Section 4\n \n \n Section 5\n \n\n```\n\n### Secondary action\n\n`AnchorNav` can also feature secondary actions. When two actions are present, the first will be presented as the `primary` variant.\n\n```jsx live\n\n \n Section one\n Section two\n Section three\n Sign up\n Learn more\n \n\n \n Section 1\n \n \n Section 2\n \n \n Section 3\n \n\n```\n\n### Fewer links\n\n`AnchorNav` implementations with fewer than `5` links, will automatically align links to the `start`.\n\n```jsx live\n\n \n Section one\n Section two\n Section three\n Sign up\n \n\n \n Section 1\n \n \n Section 2\n \n \n Section 3\n \n\n```\n\n## Component props\n\n### AnchorNav \n\n| Name | Type | Default | Description |\n| :--------------------- | :---------------------------------------------------------------------------------------------- | :-----: | :---------------------------------------------------------------------- |\n| `children` | , | | Valid child nodes |\n| `className` | `string` | | Sets a custom class |\n| `enableDefaultBgColor` | `boolean` | `false` | Enable the idle state background color, which is transparent by default |\n| `hideUntilSticky` | `boolean` | `false` | When true, the anchor nav will hide until it is sticky. |\n| `id` | `string` | | Sets a custom id |\n| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |\n\n

\n AnchorNav.Link \n

\n\n`AnchorNav.Link` are anchor links that feature in the menubar\n\n| Name | Type | Default | Description |\n| :---------- | :---------------- | :-----: | :-------------------------------------------------- |\n| `children` | `string` | | Required. Label text |\n| `className` | `string` | | Applies a custom class |\n| `href` | `string` | | Required. Local identifier for the anchored element |\n| `id` | `string` | | Sets a custom id |\n| `isActive` | `boolean` | `false` | Manually indicate that the link is active |\n| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |\n\nAdditional props can be passed to the `` element. [See MDN for a list of props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) accepted by the `` element.\n\n

AnchorNav.Action

\n\n`AnchorNav.Action` is the primary call to action for the AnchorNav\n\n| Name | Type | Default | Description |\n| :---------- | :---------------- | :-----: | :-------------------------------------------------- |\n| `children` | `string` | | Required. Label text |\n| `className` | `string` | | Applies a custom class |\n| `href` | `string` | | Required. Local identifier for the anchored element |\n| `id` | `string` | | Sets a custom id |\n| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |\n\nAdditional props can be passed to the `` element. [See MDN for a list of props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) accepted by the `` element.\n\n

AnchorNav.SecondaryAction

\n\n`AnchorNav.SecondaryAction` is an alternative call to action available for the AnchorNav\n\n| Name | Type | Default | Description |\n| :---------- | :---------------- | :-----: | :-------------------------------------------------- |\n| `children` | `string` | | Required. Label text |\n| `className` | `string` | | Applies a custom class |\n| `href` | `string` | | Required. Local identifier for the anchored element |\n| `id` | `string` | | Sets a custom id |\n| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |\n\nAdditional props can be passed to the `` element. [See MDN for a list of props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) accepted by the `` element.\n","parent":{"relativeDirectory":"components","name":"AnchorNav"}},{"fileAbsolutePath":"/home/runner/work/brand/brand/apps/docs/content/components/ComparisonTable.mdx","frontmatter":{"title":"Comparison table"},"rawBody":"---\ntitle: Comparison table\nstatus: Experimental\nfigma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=375%3A8130\nsource: https://github.com/primer/brand/blob/main/packages/react/src/ComparisonTable/ComparisonTable.tsx\nstorybook: '/brand/storybook/?path=/story/components-comparisontable--playground'\ndescription: Use the comparison table component to compare two products or features in a table format.\n---\n\nimport InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'\nimport {Box as Container} from '@primer/react'\nimport {PropTableValues} from '../../src/components'\nimport {Label} from '@primer/react'\n\n```js\nimport {ComparisonTable} from '@primer/react-brand'\n```\n\n## Examples\n\n### Default\n\n```jsx live\n\n \n Use case\n GitHub\n Jenkins\n \n \n Automation & CI/CD\n \n \n Comparable native core capabilities\n \n \n Over 13,000 GitHub Actions are available in the GitHub\n Marketplace to automate your development workflow.\n \n \n \n \n Comparable native capabilities\n \n \n 1,800+ community contributed Jenkins plugins{' '}\n in Jenkins Plugin Marketplace.\n \n \n \n \n Deployment models\n Cloud or self-hosted\n \n \n Self-hosted only\n \n \n CloudBees is the cloud alternative\n \n \n \n \n *** This is a biased overview of capabilities by use case, based on publicly\n available information as of 2022-05-16.\n \n\n```\n\n### Optional heading\n\nA heading can be provided using the `heading` prop on the root ``. This will render a heading at an appropriate size relative to the table, and present it accordingly.\n\nFor granular control over heading markup or appearance, we recommend using [`Heading`](./Heading).\n\n```jsx live\n\n \n Use case\n GitHub\n Jenkins\n \n \n Automation & CI/CD\n \n \n Comparable native core capabilities\n \n \n Over 13,000 GitHub Actions are available in the GitHub\n Marketplace to automate your development workflow.\n \n \n \n \n Comparable native capabilities\n \n \n 1,800+ community contributed Jenkins plugins{' '}\n in Jenkins Plugin Marketplace.\n \n \n \n \n Deployment models\n Cloud or self-hosted\n \n \n Self-hosted only\n \n \n CloudBees is the cloud alternative\n \n \n \n \n *** This is a biased overview of capabilities by use case, based on publicly\n available information as of 2022-05-16.\n \n\n```\n\n### Featured columns\n\nBy default, the first data column will be marked as `featured`. This is to draw attention to a particular product as the basis of a comparison against adjacent columns.\n\nUse `featuredColumn` to alternate the highlighted column if needed.\n\n#### Color customization\n\nThe default colors can be customized through dedicated CSS variables.\n\n| Name | Default |\n| :--------------------------------------------- | :---------------------------- |\n| `--brand-ComparisonTable-featured-color-start` | `--base-color-scale-pink-4` |\n| `--brand-ComparisonTable-featured-color-end` | `--base-color-scale-indigo-5` |\n\n```javascript live noinline\nconst App = () => {\n const designTokenOverrides = `\n .custom-colors[data-color-mode='dark'] {\n\n /*\n * Modify the value of these tokens.\n * Remember to apply light mode equivalents if you're enabling theme switching.\n */\n --brand-ComparisonTable-featured-color-start: var(--base-color-scale-green-2);\n --brand-ComparisonTable-featured-color-end: var(--base-color-scale-blue-3);\n\n /*\n * For example only\n */\n padding: 3rem;\n background-color: var(--brand-color-canvas-default);\n }\n\n .custom-heading {\n background: linear-gradient(271.72deg, var(--brand-ComparisonTable-featured-color-end) 7.09%, var(--brand-ComparisonTable-featured-color-start) 96.61%);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n text-align: center;\n margin-bottom: var(--base-size-32);\n }\n`\n\n return (\n \n \n \n GitHub vs Jenkins\n \n \n \n Use case\n GitHub\n Jenkins\n \n \n Automation & CI/CD\n \n \n Comparable native core capabilities\n \n \n Over 13,000 GitHub Actions are available in the GitHub Marketplace\n to automate your development workflow.\n \n \n \n \n Comparable native capabilities\n \n \n 1,800+ community contributed Jenkins plugins in Jenkins Plugin\n Marketplace.\n \n \n \n \n Deployment models\n Cloud or self-hosted\n \n \n Self-hosted only\n \n \n CloudBees is the cloud alternative\n \n \n \n \n *** This is a biased overview of capabilities by use case, based on\n publicly available information as of 2022-05-16.\n \n \n \n )\n}\n\nrender()\n```\n\n### Dynamic data\n\nComparison tables are typically generated using data from an API or content management system.\n\n`ComparisonTable` accepts `ReactNode` as a valid child, to facilitate conditional and dynamic rendering.\n\n```javascript live noinline\nconst App = () => {\n const comparisonTableData = {\n heading: 'GitHub vs Jenkins',\n footnotes:\n '*** This is a biased overview of capabilities by use case, based on publicly available information as of 2022-05-16.',\n headingLabels: ['', 'GitHub', 'Jenkins'],\n features: [\n {\n label: 'Automation & CI/CD',\n values: [\n {\n name: 'GitHub',\n value:\n 'Over 13,000 GitHub Actions are available in the GitHub Marketplace to automate your development workflow.',\n },\n {\n name: 'Jenkins',\n value:\n '1,800+ community contributed Jenkins plugins in Jenkins Plugin Marketplace.',\n },\n ],\n },\n {\n label: 'Deployment models',\n values: [\n {\n name: 'GitHub',\n value: 'Cloud or self-hosted',\n },\n {\n name: 'Jenkins',\n value: 'Self-hosted only. CloudBees is the cloud alternative',\n },\n ],\n },\n ],\n }\n\n return (\n \n \n {comparisonTableData.headingLabels.map((label) => (\n {label}\n ))}\n \n {comparisonTableData.features.map(({label, values}) => {\n return (\n \n {label}\n {values.map(({value, name}) => (\n {value}\n ))}\n \n )\n })}\n \n {comparisonTableData.footnotes}\n \n \n )\n}\n\nrender()\n```\n\n### Minimal layout\n\n`ComparisonTable` has an alternative visual presentation mode called `minimal`. This will display the data without the featured columns.\n\nThis variant is suitable for embedding into long-form content, or in situations where usage of on-screen color needs to be minimized.\n\n```jsx live\n\n \n \n Containerization\n Virtualization\n \n \n Operating system (OS) \n \n Containers use the host OS, meaning all containers must be compatible with\n that OS.\n \n \n VMs are effectively separate computers that run their own OS. For example,\n a VM can run Windows even if the host OS is Ubuntu.\n \n \n \n Computing resources \n \n Containers are lightweight, taking only the resources needed to run the\n application and the container manager.{' '}\n \n \n VMs emulate a full computer, meaning that they replicate much of the host\n environment. That uses more memory, CPU cycles, and disk space.\n \n \n \n Shareability \n \n Container images are relatively small in size, making them easy to share.\n \n \n VM images are often much larger as they include a full OS.\n \n \n \n Security\n \n Containers might be isolated only very lightly from each other. A process\n in one container could access memory used by another container, for\n example.\n \n \n By running a separate OS, VMs running on the same hardware are more\n isolated from one another than containers.\n \n \n\n```\n\n## Component props\n\n### ComparisonTable \n\n| name | type | default | required | description |\n| ---------------- | --------------------------------------------------------------------------------------- | ----------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `children` | `ComparisonTable.Row`, `ComparisonTable.Cell`, `ComparisonTable.Footnotes`, `ReactNode` | undefined | `true` | Valid children. Accepts `ReactNode` for conditional rendering. |\n| `heading` | `string` | undefined | `false` | Optional heading that appears above table, preconfigured as a `h3`. |\n| `featuredColumn` | `number` | `1` | `false` | Indicates that the data column at the specified index is visually important and unique in relation to its adjacent cells, and will be styled accordingly. |\n| `variant` | `\"default\"`, `\"minimal\"` | `\"default\"` | `false` | Applies alternative presentation. |\n\n### ComparisonTable.Row \n\nThe first row in a table is automatically styled as a table header row.\n\n| name | type | default | required | description |\n| ---------- | ---------------------- | --------- | -------- | ----------------------------------------------- |\n| `children` | `ComparisonTable.Cell` | undefined | `true` | Cells (columns) to be displayed inside the row. |\n\n### ComparisonTable.Cell \n\nThe first cell in a row is automatically styled as a header cell.\n\n| name | type | default | required | description |\n| ---------- | ----------- | --------- | -------- | ----------------------------------------------- |\n| `children` | `ReactNode` | undefined | `true` | Content to be displayed inside the column cell. |\n\n### ComparisonTable.Footnote\n\nOptional node that appears below the table. This is useful for adding additional context or disclaimers.\n\n| name | type | default | required | description |\n| ---------- | ----------- | --------- | -------- | ----------------------------------------------- |\n| `children` | `ReactNode` | undefined | `true` | Content to be displayed inside the column cell. |\n\n`id`, `className` and `ref` are forwarded by default to all children.\n\n## Design tokens\n\n| css | js |\n| ---------------------------------------------- | -------------------------------------------- |\n| `--brand-ComparisonTable-featured-color-start` | `brand.ComparisonTable.featured.color.start` |\n| `--brand-ComparisonTable-featured-color-end` | `brand.ComparisonTable.featured.color.end` |\n","parent":{"relativeDirectory":"components","name":"ComparisonTable"}},{"fileAbsolutePath":"/home/runner/work/brand/brand/apps/docs/content/components/EyebrowBanner.mdx","frontmatter":{"title":"Eyebrow banner"},"rawBody":"---\ntitle: Eyebrow banner\nstatus: Experimental\na11yReviewed: false\nsource: https://github.com/primer/brand/blob/main/packages/react/src/EyebrowBanner/EyebrowBanner.tsx\nstorybook: '/brand/storybook/?path=/story/components-eyebrowbanner--playground'\ndescription: Use the eyebrow banner to highlight important information at the top of a page.\n---\n\nimport {Label} from '@primer/react'\nimport {StarIcon, CopilotIcon} from '@primer/octicons-react'\n\nimport {PropTableValues} from '../../src/components'\nimport {\n EyebrowBannerIconColors,\n EyebrowBannerLabelColors,\n} from '@primer/react-brand'\n\n```js\nimport {EyebrowBanner} from '@primer/react-brand'\n```\n\n## Examples\n\n### Default\n\nThis is the default variant for the eyebrow banner component.\n\n```jsx live\n\n \n \n \n \n GitHub Universe: Dive in to AI, security, and DevEx\n \n \n Get your tickets now to join us on Nov. 8-9.\n \n\n```\n\n### Color modes\n\nUse `ThemeProvider` to automatically adjust the visual presentation of the component to light or dark variants.\n\n```jsx live\n\n \n \n \n \n \n \n \n GitHub Universe: Dive in to AI, security, and DevEx\n \n \n Get your tickets now to join us on Nov. 8-9.\n \n \n \n \n \n \n \n \n \n \n \n GitHub Universe: Dive in to AI, security, and DevEx\n \n \n Get your tickets now to join us on Nov. 8-9.\n \n \n \n \n\n```\n\n### Text labels\n\nUse `EyebrowBanner.Label` to display a leading text for additional context.\n\nA `color` prop is available to customise the color of the label.\n\n```jsx live\n\n \n NEW\n \n GitHub Copilot now available for Business\n \n \n \n NEW\n \n GitHub Copilot now available for Business\n \n \n \n NEW\n \n GitHub Copilot now available for Business\n \n \n\n```\n\n### Icon visuals\n\nUse `EyebrowBanner.Visual` with an `icon` prop to display a leading icon for additional context.\n\nIcons can be SVGs or ideally Octicons. If using Octicons, import the icon from `@primer/octicons-react` and pass it as the `icon` prop.\n\nA `color` option is available to customise the color of the icon.\n\nAn optional `hasBackground` prop can be used to fill the surrounding circle with the lighter hue of the selected color.\n\n```jsx live\n\n \n } color=\"blue\" hasBackground />\n \n GitHub Universe: Dive in to AI, security, and DevEx\n \n \n Get your tickets now to join us on Nov. 8-9.\n \n \n \n } color=\"blue\" />\n \n GitHub Copilot now available for Business\n \n \n\n```\n\n## Component props\n\n### EyebrowBanner \n\n| Name | Type | Default | required | Description |\n| :----- | :------- | :---------: | :------: | :---------------------------------------- |\n| `href` | `string` | `undefined` | `true` | The URL that the eyebrow banner points to |\n\n### EyebrowBanner.Heading \n\nPlease note that this is not a HTML-based heading element.\n\n| Name | Type | Default | required | Description |\n| :--------- | :---------- | :---------: | :------: | :------------------------------------------------------ |\n| `children` | `ReactNode` | `undefined` | `true` | The primary messaging that appears on the top-most line |\n\n### EyebrowBanner.SubHeading\n\n| Name | Type | Default | required | Description |\n| :--------- | :---------- | :---------: | :------: | :------------------------------------------------------------ |\n| `children` | `ReactNode` | `undefined` | `false` | Optional secondary messaging that appears beneath the heading |\n\n### EyebrowBanner.Visual\n\n| Name | Type | Default | required | Description |\n| :-------------- | :----------------------------------------------------------------------- | :---------: | :------: | :------------------------------------------ |\n| `icon` | | `undefined` | `false` | Optional icon. Accepts React-based Octicons |\n| `color` | | `undefined` | `false` | Optional icon color. |\n| `hasBackground` | `boolean` | `undefined` | `false` | Optional background color. |\n| `children` | `ReactNode` | `undefined` | `false` | Accepts `img`, `picture` or `svg` elements |\n\n### EyebrowBanner.Label\n\n| Name | Type | Default | required | Description |\n| :--------- | :------------------------------------------------------------------------ | :---------: | :------: | :------------------------------- |\n| `color` | | `undefined` | `false` | Optional label color. |\n| `children` | `ReactNode` | `undefined` | `false` | Text to appear in the label slot |\n","parent":{"relativeDirectory":"components","name":"EyebrowBanner"}},{"fileAbsolutePath":"/home/runner/work/brand/brand/apps/docs/content/components/Breadcrumbs.mdx","frontmatter":{"title":"Breadcrumbs"},"rawBody":"---\ntitle: Breadcrumbs\nstatus: Experimental\nsource: https://github.com/primer/brand/tree/main/packages/react/src/Breadcrumbs/Breadcrumbs.tsx\nstorybook: '/brand/storybook/?path=/story/components-breadcrumbs--default'\ndescription: Use breadcrumbs to enable wayfinding through navigational links\n---\n\nimport {Label} from '@primer/react'\nimport {BreadcrumbVariants} from '@primer/react-brand'\nimport {PropTableValues} from '../../src/components'\n\n```js\nimport {Breadcrumbs} from '@primer/react-brand'\n```\n\n## Examples\n\n### Default\n\n```jsx live\n\n Resources\n GitHub Copilot\n \n Chat\n \n\n```\n\n### Accent\n\n```jsx live\n\n Resources\n GitHub Copilot\n \n Chat\n \n\n```\n\n## Component props\n\n### Breadcrumbs \n\n| name | type | default | required | description |\n| --------- | ------------------------------------------------------------- | ------- | -------- | ----------------------------------------- |\n| `variant` | | | `false` | Specify alternative breadcrumb appearance |\n\n### Breadcrumbs.Item \n\n| name | type | default | required | description |\n| ---------- | --------- | ------- | -------- | ----------------------------------- |\n| `selected` | `boolean` | | `false` | Used for indicating the active link |\n| `href` | `string` | | `true` | URL of the page the link goes to |\n","parent":{"relativeDirectory":"components","name":"Breadcrumbs"}},{"fileAbsolutePath":"/home/runner/work/brand/brand/apps/docs/content/components/FormControl.mdx","frontmatter":{"title":"Form control"},"rawBody":"---\ntitle: Form control\nstatus: Experimental\nfigma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=1793%3A27781'\nsource: https://github.com/primer/brand/blob/main/packages/react/src/forms/FormControl/FormControl.tsx\nstorybook: '/brand/storybook/?path=/story/components-forms-formcontrol--playground'\ndescription: Use the form control component to display form inputs alongside labels, validation and more.\n---\n\nimport InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'\nimport {PropTableValues} from '../../src/components'\nimport {Label} from '@primer/react'\nimport {Heading} from '@primer/react-brand'\nimport {Link} from 'gatsby'\n\n```js\nimport {FormControl} from '@primer/react-brand'\n```\n\n## Examples\n\n### Basic\n\n`FormControl` is responsible for layout and ensuring that relevant IDs and ARIA attributes are passed to its `children`.\n\n```jsx live\n\n Name\n \n\n```\n\n### Alternative inputs\n\n```jsx live\n\n {/* Select */}\n \n Select\n \n \n {/* Checkbox */}\n \n \n Checkbox With an optional message\n \n \n \n {/* Radio */}\n \n \n Radio With an optional message\n \n \n \n {/* Textarea */}\n \n Textarea\n \n```\n\n### Resize\n\nBy default, `Textarea` can be resized by the user vertically and horizontally. Resizing can be prevented by setting `resize` to `none`\n\n```jsx live\n