Renders a separator component.

Examples

<.separator />
<.separator orientation="vertical" size="2" color="red" />
<.separator orientation="horizontal" my="4" />

Props

• orientation - Separator orientation: "horizontal", "vertical" (default: "horizontal")
• size - Separator size: "1", "2", "3", "4" (default: "1")
• decorative - When true, omits separator role (default: false)
• color - Color theme (default: accent color)
• Plus margin props (m, mx, my, mt, mr, mb, ml)

Attributes

• color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
• m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• orientation (:string) - Separator orientation. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
• size (:string) - Separator size. Defaults to "1". Must be one of "1", "2", "3", or "4".
• decorative (:boolean) - Whether the separator is purely decorative. Defaults to false.
• class (:string) - Additional CSS classes. Defaults to nil.
• style (:string) - Additional inline styles. Defaults to nil.
• Global attributes are accepted.