Home›Docs›Basic›Button Component

Button Component

Last updated: 1 month ago

Category: Basic

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.

Button: Comprehensive Guide to All Properties, Methods, and Events with Practical Examples1 month ago Button Component1 month ago

Preface

There are two ways to use buttons:

Native buttons (input with type=submit/reset and button tags)
Custom oc-btn component. Native buttons are already well-styled by the framework, so we'll focus on oc-btn usage.

Native Buttons

Common form buttons like submit, reset, and standalone button tags are already styled.

Output
HTML

```
                
                
            
```

Custom Button Content

There are two ways to define button text:

Use the label attribute
Place content inside the tag (but should modify label attribute for subsequent changes)

Output
HTML

A button
```
                
                
            
```

Button Width

Buttons have no default specific width. The width can be set using the width property with the following options:

Value	Description	Note
1	Fixed width = height × 1	No padding
2	Fixed width = height × 2	No padding
3	Fixed width = height × 3	-
[4-10]	And so on...	-
neat	Width matches input width	-
half	50% width	-
1of2	50% width	Alias of half
1of3	33% width	-
2of3	67% width	-
1of4	25% width	-
3of4	75% width	-
full	100% width	-
iso	Equal width and height (square)	No padding

Output
HTML

Default x4 neat half 1of3 full iso
```
                
                
            
```

Button Colors

The default button has a white background with black text. To use colored buttons, use the theme property:

Theme	Color	Text Color	Notes
prim	Primary color	White	-
error	Red	White	-
succ	Green	White	-
info	Blue	White	-
issue	Orange	White	-
warn	Yellow	Black	Yellow is too light for white text
text	Black	White	-
brief	Medium gray	Black	No inverse color treatment
caption	Light gray	Black	No inverse color treatment

Special notes:

The warn (yellow) button keeps black text because yellow is too light for white text
Both brief and caption buttons don't use inverse color treatment as their background colors are relatively light

Output
HTML

A button A button A button A button A button A button A button A button A button A button
```
                
                
            
```

Button Sizes

Buttons come in four sizes with different heights, font sizes, and spacing. The size can be set using the size property.

Size	Description	Height	Usage
xs	Extra small button	2.4rem	Rarely used
sm	Small button	3.2rem	-
md	Medium button (default)	4.0rem	Default size
lg	Large button	5.6rem	-

Correspondingly, form fields (input) also have size options: sm/md/lg.

Output
HTML

xs sm md Default lg
```
                
                
            
```

Button Outline

Buttons come with three outline styles. By default, they have small rounded corners. Use the shape property to set the button outline style:

Value	Description	Appearance
square	Square outline	90° sharp corners
round	Circular outline	Fully rounded (pill shape)
radius	Small rounded corners (default)	Slightly rounded edges

Output
HTML

square round radius
```
                
                
            
```

Button Styles

Buttons come in three visual styles. The default is black text on white background. Use the type property to set alternative button styles:

Value	Style Description	Visual Characteristics
solid	Standard button	Black text on white background, default
seal	Outlined style	Transparent fill with border
plain	Text-only button	No background or border (maintains standard button dimensions)

Output
HTML

seal plain
```
                
                
            
```

Anchor Links

By default, the component wrapper uses SPAN tag. With href attribute, it becomes an A tag (can also set target, rel, download like regular links).

Anchor tags can be focused by default (no need for tabindex).

Output
HTML

A link
```
                
                
            
```

SEO Optimization

Since component content is assembled via internal JS, it may not be SEO-friendly. Alternative SEO-friendly syntax: place a tag with attributes inside the component.

Output
HTML

Focusable

Buttons can't be focused by default (Tab key won't work). Add tab attribute (0 or 1) to enable focus.

If href is set (making it an anchor), tab isn't needed (anchors are focusable by default).

Output
HTML

Focusable, but excluded from tab sequence Focusable, included in natural tab order Focusable 1, with explicit tab priority Focusable 2, with explicit tab priority
```
                
                
            
```

Attributes

Name	Values	Default	Description
type	'seal'/'plain'/'solid'	'solid'	Button type (default: solid)
theme	'prim'/'error'/'succ'/'info'/'warn'/ 'issue'/'text'/'breif'/'caption'	-	Button color theme (default: none)
label	''	''	Button text
href	''	-	Link URL (converts to anchor tag)
target	Same as anchor tag's target	'_blank'	Link target (requires href)
rel	Same as anchor tag's rel	-	Link relation (requires href)
download	Same as anchor tag's download	-	Download filename (requires href)
tab	'0'/'1'	-	tabindex value (for :focus). Not needed if href is set
size	'xs'/'sm'/'md'/'lg'	'md'	Button size (xs=1.8rem, sm=2.4rem, md=4rem, lg=5.6rem)
width	'1'/'10'/'neat'/'full'/'ios'/'half'/ '1of2'/'1of3'/'2of3'/'1of4'/'3of4'	-	Button width (3=height×3, neat=input width, full=100%)
shape	radius/square/round	'radius'	Button shape (default: small rounded corners)
check	'ing'/'ed'	-	Loading/check state (ing=in progress, ed=done)
icon	Icon class	-	Prefix icon class
tail	Icon class	-	Suffix icon class
mean	'update'/'remove'/'expand'/'more'	-	Button meaning (auto-adds meaning icon at end)
disk	''	-	Circular image URL
cube	''	-	Square image URL
image	''	-	Regular image URL
badge	''	-	Notification badge
tips	''	-	Tooltip text
disabled	''	-	Disable button
shaded	''	-	Add shadow
gradient	''	-	Use gradient
inverted	''	-	Invert colors (for dark backgrounds)

Common Methods

Common component methods:

set: Set properties (takes key-value pairs or array)
reset: Reset properties (no params)
clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

connected: Component connected (no params)
disconnected: Component disconnected (no params)
adopted: Component moved (no params)
set: Property set (receives value)
cleared: Property cleared (no params)
reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Tags: Native, Vanilla, Web Components

Confirm Dialog

2 months ago

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

1 month ago