var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var D=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),x=(i,e)=>{for(var r in e)t(i,r,{get:e[r],enumerable:!0})},d=(i,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of m(e))!g.call(i,a)&&a!==r&&t(i,a,{get:()=>e[a],enumerable:!(o=u(e,a))||o.enumerable});return i};var f=(i,e,r)=>(r=i!=null?p(v(i)):{},d(e||!i||!i.__esModule?t(r,"default",{value:i,enumerable:!0}):r,i)),b=i=>d(t({},"__esModule",{value:!0}),i);var l=D((N,c)=>{c.exports=_jsx_runtime});var L={};x(L,{default:()=>h,frontmatter:()=>j});var n=f(l()),j={id:"divider",title:"Divider",package:"@saas-ui/core",description:"Dividers are used to visually separate content in a list or group."};function s(i){let e={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...i.components},{ComponentLinks:r}=e;return r||k("ComponentLinks",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"Dividers are used to visually separate content in a list or group."}),` `,(0,n.jsx)(r,{theme:{componentName:"divider"},github:{url:"https://github.com/saas-ui/saas-ui/blob/main/packages/saas-ui-core/src/divider"},npm:{package:"@saas-ui/core"}}),` `,(0,n.jsx)(e.h2,{children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Divider, DividerLabel } from '@saas-ui/react' `})}),` `,(0,n.jsx)(e.h2,{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.h2,{children:"Basic"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h2,{children:"Variants"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"Divider"})," component comes with 2 variants: ",(0,n.jsx)(e.code,{children:"solid"})," and ",(0,n.jsx)(e.code,{children:"dashed"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h2,{children:"Label"}),` `,(0,n.jsxs)(e.p,{children:["You can add a text label that will be aligned in the center of the ",(0,n.jsx)(e.code,{children:"Divider"}),`, this will render a `,(0,n.jsx)(e.code,{children:"div"})," tag."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Divider `})}),` `,(0,n.jsx)(e.h3,{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"}),". The default is ",(0,n.jsx)(e.code,{children:"horizontal"}),"."]}),` `,(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:`import { Center } from '@chakra-ui/react' import { Divider } from '@saas-ui/react' export default function Vertical() { return ( ) } `})}),` `,(0,n.jsx)(e.p,{children:"Vertical with a label."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`import { Center } from '@chakra-ui/react' import { Divider, DividerLabel } from '@saas-ui/react' export default function VerticalWithLabel() { return ( Label ) } `})}),` `,(0,n.jsx)(e.h2,{children:"Composition"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`import { Stack, Text } from '@chakra-ui/react' import { Divider, DividerLabel } from '@saas-ui/react' export default function Composition() { return ( Saas UI ) } `})})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(s,{...i})}):s(i)}function k(i,e){throw new Error("Expected "+(e?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(L);})(); ;return Component;

Divider

Props