get_app Download

Divider

Divide text or section components with some great features and quick to implement

Default

You can add a line to divide with the component vs-divider.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text

You can add a text between the line to delimit two elements and have a description for the user.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
My Text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text Position

You can guide the text in 5 ways with property position:

  • left
  • left-center
  • center (default)
  • right-center
  • right

left
left-center
center (default)
right-center
right

Color

You can change the color of the component with the property color, you can use the main colors or RGB and HEX.

WARNING

Only RGB and HEX colors are supported.

Default
Primary
Success
Danger
Warning
Dark
RGB
HEX

Background

You can change the background of the text with the property background, you can use the main colors or RGB and HEX.

WARNING

Only RGB and HEX colors are supported.

Default
Primary
Success
Danger
Warning
Dark
RGB
HEX

Icons

To add an icon within the division we have the property icon.

TIP

Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

arrow_downward
star
check
delete_forever
report_problem
watch_later

Style

You can change line's style with the property border-style. The allowed values ​​are equivalent to the border-style property in CSS.

  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border (default)

dotted
dashed
solid
Edit this page

API #

Name Type Parameters Description default
position String (left, left-center, right-center, right) Determine the position of the text or icon. center
color String Change the color of the line and the text. rgba(0,0,0.1)
background String Change the background color of the text. transparent
icon String Icon Class Add an icon instead of the text.
border-style String Determines the type of line in the component. solid
icon-pack String Icon Pack Class Name Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons

DropDown keyboard_arrow_right