Component Library - DEV Partner Portal

\n

Form Fields

\n \n

\n

Form field components provide consistent styling and accessibility features for form inputs.

\n

\n \n

\n

Text Input

\n {{> components/ui/form-field \n id=\"demo-text\" \n label=\"Text Input\" \n type=\"text\" \n placeholder=\"Enter text here\"\n }}\n \n

\n{{> components/ui/form-field \n id=\"demo-text\" \n label=\"Text Input\" \n type=\"text\" \n placeholder=\"Enter text here\"\n}}\n

\n

\n \n

\n

Required Email Input

\n {{> components/ui/form-field \n id=\"demo-email\" \n label=\"Email Address\" \n type=\"email\" \n placeholder=\"Enter your email\"\n required=\"true\"\n autocomplete=\"email\"\n }}\n \n

\n{{> components/ui/form-field \n id=\"demo-email\" \n label=\"Email Address\" \n type=\"email\" \n placeholder=\"Enter your email\"\n required=\"true\"\n autocomplete=\"email\"\n}}\n

\n

\n \n

\n

Select Input

\n {{> components/ui/form-field \n id=\"demo-select\" \n label=\"Select Option\" \n type=\"select\" \n placeholder=\"Choose an option\"\n options='[\n {\"value\": \"option1\", \"label\": \"Option 1\"},\n {\"value\": \"option2\", \"label\": \"Option 2\"},\n {\"value\": \"option3\", \"label\": \"Option 3\"}\n ]'\n }}\n \n

\n{{> components/ui/form-field \n id=\"demo-select\" \n label=\"Select Option\" \n type=\"select\" \n placeholder=\"Choose an option\"\n options='[\n {\"value\": \"option1\", \"label\": \"Option 1\"},\n {\"value\": \"option2\", \"label\": \"Option 2\"},\n {\"value\": \"option3\", \"label\": \"Option 3\"}\n ]'\n}}\n

\n

\n \n

\n

Textarea

\n {{> components/ui/form-field \n id=\"demo-textarea\" \n label=\"Text Area\" \n type=\"textarea\" \n placeholder=\"Enter multiple lines of text\"\n rows=\"3\"\n }}\n \n

\n{{> components/ui/form-field \n id=\"demo-textarea\" \n label=\"Text Area\" \n type=\"textarea\" \n placeholder=\"Enter multiple lines of text\"\n rows=\"3\"\n}}\n

\n

Buttons

\n \n

\n

Button components provide consistent styling and accessibility features for buttons.

\n

\n \n

\n

Primary Button

\n

\n {{> components/ui/button \n id=\"demo-primary-button\" \n type=\"button\" \n variant=\"primary\" \n text=\"Primary Button\"\n }}\n

\n \n

\n{{> components/ui/button \n id=\"demo-primary-button\" \n type=\"button\" \n variant=\"primary\" \n text=\"Primary Button\"\n}}\n

\n

\n \n

\n

Secondary Button

\n

\n {{> components/ui/button \n id=\"demo-secondary-button\" \n type=\"button\" \n variant=\"secondary\" \n text=\"Secondary Button\"\n }}\n

\n \n

\n{{> components/ui/button \n id=\"demo-secondary-button\" \n type=\"button\" \n variant=\"secondary\" \n text=\"Secondary Button\"\n}}\n

\n

\n \n

\n

Outline Button

\n

\n {{> components/ui/button \n id=\"demo-outline-button\" \n type=\"button\" \n variant=\"outline\" \n text=\"Outline Button\"\n }}\n

\n \n

\n{{> components/ui/button \n id=\"demo-outline-button\" \n type=\"button\" \n variant=\"outline\" \n text=\"Outline Button\"\n}}\n

\n

\n \n

\n

Button Sizes

\n

\n {{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n size=\"sm\"\n text=\"Small\"\n }}\n \n {{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n text=\"Medium (Default)\"\n }}\n \n {{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n size=\"lg\"\n text=\"Large\"\n }}\n

\n \n

\n{{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n size=\"sm\"\n text=\"Small\"\n}}\n\n{{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n text=\"Medium (Default)\"\n}}\n\n{{> components/ui/button \n type=\"button\" \n variant=\"primary\" \n size=\"lg\"\n text=\"Large\"\n}}\n

\n

Message Boxes

\n \n

\n

Message boxes provide consistent styling for success, error, and info messages.

\n

\n \n

\n

Success Message

\n

\n {{> components/ui/message-box \n id=\"demo-success\" \n type=\"success\" \n message=\"This is a success message.\"\n }}\n

\n \n \n \n

\n{{> components/ui/message-box \n id=\"demo-success\" \n type=\"success\" \n message=\"This is a success message.\"\n}}\n

\n

\n \n

\n

Error Message

\n

\n {{> components/ui/message-box \n id=\"demo-error\" \n type=\"error\" \n message=\"This is an error message.\"\n }}\n

\n \n \n \n

\n{{> components/ui/message-box \n id=\"demo-error\" \n type=\"error\" \n message=\"This is an error message.\"\n}}\n

\n

\n \n

\n

Info Message

\n

\n {{> components/ui/message-box \n id=\"demo-info\" \n type=\"info\" \n message=\"This is an info message.\"\n }}\n

\n \n \n \n

\n{{> components/ui/message-box \n id=\"demo-info\" \n type=\"info\" \n message=\"This is an info message.\"\n}}\n

\n

\n \n

\n

Enhanced Success Message

\n

\n {{> components/ui/success-message \n id=\"demo-enhanced-success\" \n title=\"Operation Successful\" \n message=\"Your changes have been saved successfully.\"\n details=\"You can continue working with the updated information.\"\n }}\n

\n \n \n \n

\n{{> components/ui/success-message \n id=\"demo-enhanced-success\" \n title=\"Operation Successful\" \n message=\"Your changes have been saved successfully.\"\n details=\"You can continue working with the updated information.\"\n}}\n

\n

Sections

\n \n

\n

Section components provide consistent styling for content sections.

\n

\n \n

\n

Basic Section

\n {{> components/ui/section \n icon=\"📝\" \n title=\"Section Title\"\n content=\"

This is the content of the section.

\"\n }}\n \n

\n{{> components/ui/section \n icon=\"📝\" \n title=\"Section Title\"\n content=\"

This is the content of the section.

\"\n}}\n

\n

\n \n

\n

Section with Footer

\n {{> components/ui/section \n icon=\"🔍\" \n title=\"Section with Footer\"\n content=\"

This section has a footer with additional content or actions.

\"\n footer=\"

\"\n }}\n \n

\n{{> components/ui/section \n icon=\"🔍\" \n title=\"Section with Footer\"\n content=\"

This section has a footer with additional content or actions.

\"\n footer=\"

\"\n}}\n

\n