var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var v=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),x=(i,e)=>{for(var r in e)a(i,r,{get:e[r],enumerable:!0})},c=(i,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!u.call(i,t)&&t!==r&&a(i,t,{get:()=>e[t],enumerable:!(o=p(e,t))||o.enumerable});return i};var j=(i,e,r)=>(r=i!=null?h(m(i)):{},c(e||!i||!i.__esModule?a(r,"default",{value:i,enumerable:!0}):r,i)),D=i=>c(a({},"__esModule",{value:!0}),i);var s=v((N,d)=>{d.exports=_jsx_runtime});var y={};x(y,{default:()=>_,frontmatter:()=>f});var n=j(s()),f={id:"divider",title:"Divider",category:"data-display",package:"@chakra-ui/layout",description:"Dividers are used to visually separate content in a list or group."};function l(i){let e=Object.assign({h2:"h2",pre:"pre",code:"code",p:"p",h3:"h3"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Divider } from '@chakra-ui/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"Divider"})," displays a thin horizontal or vertical line, and renders a ",(0,n.jsx)(e.code,{children:"hr"}),` tag.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h3,{id:"divider-orientation",children:"Divider Orientation"}),` `,(0,n.jsxs)(e.p,{children:["Pass the ",(0,n.jsx)(e.code,{children:"orientation"})," prop and set it to either ",(0,n.jsx)(e.code,{children:"horizontal"})," or ",(0,n.jsx)(e.code,{children:"vertical"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.p,{children:`If the vertical orientation is used, make sure that the parent element is assigned a height.`}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h2,{id:"composition",children:"Composition"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Chakra UI `})})]})}function k(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(l,i)})):l(i)}var _=k;return D(y);})(); ;return Component;

Divider

Props#

colorScheme

size

variant

`colorScheme`

`size`

`variant`