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