Black Lives Matter.  Support the Equal Justice Initiative.
Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub

Role

Role is the most abstract component on top of which all other Reakit components are built. It's inspired by the WAI-ARIA RoleType Role. By default, it renders a div element.

#Installation

npm install reakit

Learn more in Get started.

#Usage

Role
import { Role } from "reakit/Role";

function Example() {
  return <Role>Role</Role>;
}

#as prop

Learn more about the as prop in Composition.

import { Role } from "reakit/Role";

function Example() {
  return <Role as="button">Button</Role>;
}

#Render props

Learn more about render props in Composition.

import { Role } from "reakit/Role";

function Example() {
  return <Role>{(props) => <button {...props}>Button</button>}</Role>;
}

#Props hooks

Learn more about props hooks in Composition.

import { useButton } from "reakit/Button";
import { Role } from "reakit/Role";

function Example() {
  const buttonProps = useButton();
  return (
    <Role {...buttonProps} as="button">
      Button
    </Role>
  );
}

#Composition

  • Role is used by all Reakit components.

Learn more in Composition.

#Props

#Role

No props to show