Focusable
A focus ring clearly indicates which item has keyboard focus.Installation
| Install | yarn add @atlaskit/primitives |
|---|---|
| Source | Bitbucket.org, (opens new window) |
| npm | @atlaskit/primitives, (opens new window) |
| Bundle | unpkg.com, (opens new window) |
Focusable also supports all valid props as specified by the HTML element type in the as prop. The
default is a button, so it would support all valid HTMLButtonElement props.
Props
| Description | The DOM element to render as the Focusable element. |
|---|---|
| Default | 'button' |
| Type | "symbol" | "object" | "text" | "article" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "switch" | "table" | "label" | "style" | ... 157 more ... | "view"T |
| Description | No description. |
|---|---|
| Type | string | number | boolean | ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal |
| Description |
|
|---|---|
| Type | never |
| Description | Controls whether the focus ring should be applied around or within the composed element. |
|---|---|
| Type | boolean |
| Description | Forwarded ref. |
|---|---|
| Type | React.Ref<HTMLObjectElement> | React.Ref<HTMLElement> | React.Ref<HTMLDialogElement> | React.Ref<HTMLFormElement> | ... 112 more ... | React.Ref<...>ComponentPropsWithRef<T>["ref"] |
| Description | No description. |
|---|---|
| Type | React.CSSProperties |
| Description | A unique string that appears as data attribute |
|---|---|
| Type | string |
| Description | Apply a subset of permitted styles powered by Atlassian Design System design tokens. |
|---|---|
| Type | false | (XCSSValue<"appearance" | "color" | "maxWidth" | "grid" | "borderColor" | "clipPath" | "filter" | "marker" | "mask" | "height" | "width" | "translate" | "content" | "border" | ... 487 more ... | "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; }) |