Bar

Bar is a component that represents a horizontal bar, generally combined with inner elements like a back button, an action button, or data filters. It is generally placed right above components like Box (see example), DataView, Split and CardLayout.

Usage

import { Main, BackButton, Bar, Button, Box } from '@aragon/ui'

function App() {
  return (
    <Main>
      <Bar primary={<BackButton />} />
      <Box />
    </Main>
  )
}

Props

children

TYPE	DEFAULT VALUE
React node	None

Sets the entire content of Bar. Overrides both primary and secondary and their default spacing. You should generally prefer using primary and secondary, when possible.

primary

TYPE	DEFAULT VALUE
React node	None

The left part (for left-to-right languages) of Bar. The BackButton component is often used here.

secondary

TYPE	DEFAULT VALUE
React node	None

The right part (for left to right languages) of Bar.