Button Component
Category: BasicThe 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.
Preface
There are two ways to use buttons:
- Native buttons (
inputwith type=submit/reset andbuttontags) - Custom
oc-btncomponent. Native buttons are already well-styled by the framework, so we'll focus onoc-btnusage.
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
labelattribute - Place content inside the tag (but should modify
labelattribute 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
briefandcaptionbuttons 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')})