Button: Comprehensive Guide to All Properties, Methods, and Events with Practical Examples

Last updated: 7 months ago

Category: Examples

The OC-BTN custom component represents a button. As one of the most fundamental web elements, this button component supports multiple child elements including prefixes, suffixes, icons, and images. It offers various size options, structural styles, and theme color styles.

Inverted Solid Buttons

For solid buttons on dark backgrounds, add the inverted attribute.

Hollow Buttons

Add type=seal attribute to create outline-style buttons (with borders instead of filled colors).

Inverted Hollow Buttons

For hollow buttons on dark backgrounds, add the inverted attribute.

Minimalist Buttons

Use type=plain attribute for minimalist buttons (no background or border but maintains standard button dimensions).

Inverted Minimalist Buttons

For minimalist buttons on dark backgrounds, add the inverted attribute.

Icon Buttons

Use width=1 attribute for icon buttons (circular/square shape). Typically contains an icon inside.

Button Shadows

Add shaded attribute for frosted glass shadow effect (works on hollow buttons too).

Gradient Buttons

For solid buttons, add gradient attribute for gradient colors (doesn't work on hollow/minimalist buttons).

Disabled Buttons

Add disabled attribute to disable buttons (shows as semi-transparent and non-clickable).

Using Icons

For prefix icons, use icon=* attribute (value is icon classname).
For suffix icons, use tail=* attribute.

Using Images

For prefix images:

• disk: Circular image
• cube: Square image
• image: Regular image (height-limited)

Using Badges

Add badge attribute to show notification count (hidden if value is 0).

Using Tooltips

Add tips attribute to show tooltip. Clear value or remove attribute to hide.

Loading Buttons

Add check=ing attribute to show loading state (adds spinner, disables interaction).