SkipToContent

An internal navigation component that help users move around a page.

Basic Usage


import { SkipToContent } from '@krakentech/coral';
 
const CONTENT_ID = 'main-content';
 
<SkipToContent id={CONTENT_ID} />
 
<main id={CONTENT_ID}>Main content</main>

Click here and then press tab to activate the SkipToContent atom.

Properties

id

Declare a constant for the ID, which can be used as a prop for both the Element and the SkipToContent component.


const CONTENT_ID = 'alternative-id';
 
<SkipToContent id={CONTENT_ID} />

label


<SkipToContent id={CONTENT_ID} label="Alternative label" />

Full API

Name	Type	Default
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`loading`	`boolean` To be used with children. If true, the skeleton is visible. Once false, the children are faded in.	`true`
`fadeInDuration`	`number` The fadeIn duration in seconds. Requires `loading` toggled to `false` in order to see the transition.	`0.5`
`animation`	`ResponsiveVariant<ConditionalValue<"pulse" \| "wave"> \| undefined>` The type of animation. Set as undefined disable.	`pulse`
`variant`	`ResponsiveVariant<ConditionalValue<"text" \| "rounded" \| "circular" \| "rectangular"> \| undefined>` The variant of the skeleton to use.	`text`
`height`	`ResponsiveVariant<string \| number>` Height of the skeleton.
`width`	`ResponsiveVariant<string \| number>` Width of the skeleton.
`aria-label`	`string \| undefined` A hidden screen-reader label to describe to the user what the skeleton is for.
`children`	`ReactNode`